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>