javascript - 单击任意位置关闭菜单；单击任何位置时如何使其停止打开

Question

我有一个在单击选项卡时打开的菜单，我这样做是为了当查看者单击网页上的任何位置时，菜单将再次关闭。但是，当单击网页上的任何位置时，菜单也会打开。我如何做到这一点，以便单击选项卡是打开菜单的唯一方法，单击选项卡或其他任何地方都会使其关闭？

这就是我所拥有的：

<script type="text/javascript">
    $(document).ready(function(){
        $("#bodyw2").click(function(){
            $(".panel").toggle("fast");
            $(".trigger").toggleClass("active");    
            return true;
        });
    });

    $(document).ready(function(){
        $(".trigger").click(function(){
            $(".panel").toggle("fast");
            $(this).toggleClass("active");  
            return false;
        });
    });
</script>

我的网站是http://www.drippydenton.net/如果对我在说什么还有其他问题。

Answer 1

使用hide()内部点击事件 .. 而不是toggle().

  $(document).ready(function(){
   $("#bodyw2").click(function(){
      $(".panel").hide("fast");
      $(".trigger").removeClass("active");

      return true;
   });
    $(".trigger").click(function(){
      $(".panel").toggle("fast");
      $(this).toggleClass("active");

      return false;
    });
 });

而且您不需要两个 document.ready 函数...在一个 document.ready 函数中添加所有代码

Answer 2

最简单的方法是绑定和取消绑定主体的点击事件。您的代码变为：

$(document).ready(function(){
    $(".trigger").click(function(){
        $(".panel").toggle("fast");
        $(this).toggleClass("active");

        $("#bodyw2").click(function(){
            $(".panel").toggle("fast");
            $(".trigger").toggleClass("active");
            $("#bodyw2").unbind('click');
            return true;
        });

        return false;
    });
});