1.按钮上的click事件 ： 控制菜单的显示隐藏,同时需要阻止事件冒泡到document；
2.document的click事件： 让menu隐藏,这个功能是点击document任意一处,将菜单隐藏；
3.菜单的click事件：菜单本身并没有，是菜单内部的元素的click事件，需要阻止内部元素的click事件冒泡到document；
4.菜单内部list元素的click事件：menu不能隐藏。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>菜单隐藏显示</title> <style> .showBtn{ cursor: pointer; } .menu { display: none; background-color: #fff; width: 100px; } .menu ul{ list-style: none; } .menu a{ display:block; text-decoration: none; margin: 10px 0; } </style> </head> <body> <input type="button" class="showBtn" value="显示菜单"> <!-- 菜单默认不显示 --> <div class="menu"> <ul> <li><a href="">菜单一</a></li> <li><a href="">菜单二</a></li> <li><a href="">菜单三</a></li> </ul> </div> <script src="./jquery-1.11.3.min.js"></script> <script> //点击“显示菜单”按钮时，显示菜单，并阻止事件冒泡 $(".showBtn").click(function(e){ if($(".showBtn").val()=='隐藏菜单'){ $(".menu").hide(); $(this).val('显示菜单'); }else{ $(".menu").show(); $(this).val('隐藏菜单'); } e.stopPropagation();//阻止按钮点击事件冒泡到document }); //点击“菜单”内部时，阻止事件冒泡。(这样点击内部时，菜单不会关闭) $(".menu").click(function(e){ e.stopPropagation();//阻止菜单内部点击事件冒泡到document }); //监听整个document的点击事件，如果能收到事件(说明点击源既不是“显示菜单”按钮，也不来自菜单内部)，就可以放心关闭菜单了 $(document).click(function(){ $(".menu").hide(); $(".showBtn").val('显示菜单'); }); </script> </body> </html>