Javascript 单击任意位置关闭菜单;如何使其在单击任何位置时停止打开

Javascript 单击任意位置关闭菜单;如何使其在单击任何位置时停止打开,javascript,jquery,toggle,toggleclass,Javascript,Jquery,Toggle,Toggleclass,我有一个菜单,当点击一个标签时,它会打开,我这样做是为了当浏览者点击网页上的任何地方时,菜单会再次关闭。但是,单击网页上的任何位置时,该菜单也将打开。我如何使它成为点击标签是打开菜单的唯一方式,而点击标签或其他任何地方将使其关闭 这就是我所拥有的: <script type="text/javascript"> $(document).ready(function(){ $("#bodyw2").click(function(){ $(

我有一个菜单,当点击一个标签时,它会打开,我这样做是为了当浏览者点击网页上的任何地方时,菜单会再次关闭。但是,单击网页上的任何位置时,该菜单也将打开。我如何使它成为点击标签是打开菜单的唯一方式,而点击标签或其他任何地方将使其关闭

这就是我所拥有的:

<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>

$(文档).ready(函数(){
$(“#bodyw2”)。单击(函数(){
$(“.panel”)。切换(“快速”);
$(“.trigger”).toggleClass(“活动”);
返回true;
});
});
$(文档).ready(函数(){
$(“.trigger”)。单击(函数(){
$(“.panel”)。切换(“快速”);
$(此).toggleClass(“活动”);
返回false;
});
});
我的网站是关于我所说的是否还有其他问题。

使用
hide()
体内点击事件。。而不是
切换()

而且您不需要两个document.ready函数。。。在一个文档中添加所有代码。就绪功能使用
hide()
正文内单击事件。。而不是
切换()


而且您不需要两个document.ready函数。。。在一个文档中添加所有代码。就绪功能执行此操作的最简单方法是绑定和解除绑定正文的单击事件。您的代码变成:

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

最简单的方法是绑定和解除绑定主体的单击事件。您的代码变成:

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