jQuery - 单击新 div 时隐藏其他 div答案

【问题标题】：jQuery - Hide other divs when clicking new divjQuery - 单击新 div 时隐藏其他 div
【发布时间】：2017-02-13 04:18:36
【问题描述】：

我编写了这段代码，当单击另一个 div 时会显示一个菜单 (div)。问题是当我打开其中一个菜单并单击 div 打开一个新菜单（有多个菜单循环出来）时，其他菜单不会关闭。这意味着我可以同时打开无限数量的菜单，只要我没有在 div/菜单之外点击...

简短：我希望在单击打开新菜单时隐藏所有打开的菜单 div，除了我刚刚打开的菜单...

代码：

$('.commentSettings').click(function(e) {
    var id = $(this).attr('id');
    $('#mod-dropdown' + id).stop().toggle(200);
    e.stopPropagation();
    $('#mod-dropdown' + id).show();

    $(document).click(function(){
        $("#mod-dropdown" + id).hide();
    });
 });

【问题讨论】：

更多上下文，或示例 jsfiddle。 :(

标签： jquery toggle

【解决方案1】：

如果你给所有的 div 一个你想隐藏的类，例如menu，那么你可以简单地在点击函数的开头弹出$('.menu').hide();。

请注意，您已在函数内准备好一个文档，我认为您不想将其放在那里。 document.ready 函数应该总是首先出现，并且你在其中注册你的事件处理程序。

【讨论】：

嗯，你在哪里找到准备好的文件？我在函数中找不到 document.ready ：S
抱歉我误读了$(document).click(function...。但即便如此，我认为您不想在第一次点击函数中添加该处理程序。
$('[id^="#mod-dropdown"]').hide(); 不是更快的方法吗？
这是一个 CSS3 选择器，没有向 jQuery 选择器添加变量。如果你想隐藏所有元素，id 只针对一个元素而不是所有元素。
那是 jQuery attributeStartsWith 选择器。看我的回答。有 jQuery 文档的链接。

【解决方案2】：

我认为所有菜单都有一个共同的类别。使用它首先关闭所有菜单。然后打开当前点击的那个。

【讨论】：

【解决方案3】：

你可以有这样的东西：

var id = -1;
$('.commentSettings').click(function(e) {
    if( id != -1 )
        $('#mod-dropdown' + id).hide();
    var id = $(this).attr('id');
    $('#mod-dropdown' + id).stop().toggle(200);
    e.stopPropagation();
    $('#mod-dropdown' + id).show();

    $(document).click(function(){
        $("#mod-dropdown" + id).hide();
    });
});

【讨论】：

是的。只要不存在#mod-dropdown-1。

【解决方案4】：

这应该可行：

 $('.commentSettings').click(function(e) {
    var id = $(this).attr('id');
    $('#mod-dropdown' + id).stop().toggle(200);
    e.stopPropagation();
    $('#mod-dropdown' + id).show();
 });

 $(document).click(function(){
    $('[id^="#mod-dropdown"]').hide();
});

我在这里使用 jQuery attributeStartsWith 选择器。

您可以在这里找到更多信息：http://api.jquery.com/attribute-starts-with-selector/

【讨论】：

不幸的是，这个脚本不能完全工作。在菜单外点击时，菜单没有关闭...