用jQuery实现：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .menu_level1{ width:500px; height:auto; margin:50px auto; } .menu_level1>li{ position: relative; float: left; list-style-type: none; height:30px; } .menu_level1>li>a{ padding:10px 15px; font-size:16px; } .menu_level2{ position:absolute; top:30px; left:0; padding:20px; height:100px; background-color:#fff; border:1px solid #ccc; border-radius:5px; box-shadow: 2px 2px 2px #eee; display: none; } .menu_level1>li:hover{ background-color:pink; cursor: pointer; } </style> </head> <body> <ul class="menu_level1"> <li><a>哈哈</a></li> <li><a>嘿嘿</a></li> <li><a>呼呼</a></li> <li><a>点我</a> <div class="menu_level2">哈罗，我是一块板砖，哪里需要哪里搬。。。。。</div> </li> </ul> </body> <script src="jquery-3.2.1.min.js"></script> <script> $(".menu_level1 li").click(function(){ if($(this).hasClass("curr")){ $(this).removeClass("curr"); $(".menu_level2").hide(); }else{ $(".menu_level2").show(); $(this).addClass("curr"); } }); $(document).click(function(e){ var target = $(e.target); if(target.closest(".menu_level1").length != 0) return; $(".menu_level2").hide(); }); </script> </html>
然而，用angular实现，轻松的几句代码即可完成
<!DOCTYPE html> <html ng-app="app"> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .menu_level1{ width:500px; height:auto; margin:50px auto; } .menu_level1>li{ position: relative; float: left; list-style-type: none; height:30px; } .menu_level1>li>a{ padding:10px 15px; font-size:16px; } .menu_level2{ position:absolute; top:30px; left:0; padding:20px; height:100px; background-color:#fff; border:1px solid #ccc; border-radius:5px; box-shadow: 2px 2px 2px #eee; } .menu_level1>li:hover{ background-color:pink; cursor: pointer; } </style> </head> <body ng-controller="myCtrl"> <ul class="menu_level1"> <li><a>哈哈</a></li> <li><a>嘿嘿</a></li> <li><a>呼呼</a></li> <li ng-click="show()"><a>点我</a> <div class="menu_level2" ng-show="showDiv">哈罗，我是一块板砖，哪里需要哪里搬。。。。。</div> </li> </ul> </body> <script src="angular.js"></script> <script> var app = angular.module("app",[]); app.controller("myCtrl",function($scope){ $scope.showDiv = false; $scope.show = function(){ $scope.showDiv = !$scope.showDiv; }; }); </script> </html>