如何關閉菜單時點擊它

Question

我有一個下拉菜單，我想要的行爲，當點擊菜單外，它關閉。

這是我的jQuery代碼：

 <script> 
    $(document).ready(function(){ 
     $(".a-for-noti-scroll").on("click",function(){ 
      $("#nano").toggleClass("x"); 
      $(".top-triangle-noti-scroll").toggleClass("y"); 
      e.stopPropagation(); 
     }); 
     $("body").on("click",function(e){ 
      $('#nano').css('visibility', 'hidden'); 
      $(".top-triangle-noti-scroll").css('display', 'none'); 
      e.stopPropagation(); 
     }); 
    }); 
    </script> 

但是，這是行不通的。

我試着.hide()爲body，但這樣菜單不會打開。 我該怎麼辦？

Answer 1

你可能有一個邏輯錯誤，嘗試這樣的例子：

$(document).ready(function(){ 

    // click inside will leave it open 
    $("#noti").on("click",function(e){ 
     $('#noti').css('display','block'); 
     e.stopPropagation(); 
    }); 

    // just for this example to open the "menu" 
    $("#top").on("click",function(e){ 
     $("#noti").css('display','block'); 
     e.stopPropagation(); 
    }); 

    // any click around closes 
    $(document).on("click",function(e){ 
     $('#noti').css('display', 'none'); 
     e.stopPropagation(); 
    }); 
}); 

這裏是一個working fiddle

這僅僅是對clickHandler堆疊的例子。