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

这仅是点击处理程序堆叠的示例。

如何在外面点击时关闭菜单

1 个答案: