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

执行此操作的最简单方法是绑定和取消绑定正文的click事件。您的代码变为：

$(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;
    });
});

点击任何关闭菜单;在任何地方点击时如何让它停止打开

2 个答案: