如何关闭菜单时点击它

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堆叠的例子。