查询。隐藏其他元素，除了这个答案

【问题标题】：Jquery. Hide other elements, except this查询。隐藏其他元素，除了这个
【发布时间】：2020-09-09 12:41:48
【问题描述】：

我正在使用 Pollate Template 来创建投票。有一个用户创建的投票列表，单击 3 个点（菜单图标）后，下拉列表显示删除此投票的选项。如果显示子菜单并且您单击屏幕上的任意位置它会隐藏。

但我发现了一个错误，即如果您单击另一个子菜单图标，它不会隐藏其他子菜单（请看下图）。

点击任何地方时它应该被隐藏，即使它是另一个条目的子菜单图标。

有HTML结构：

    <div class="pl-options">
         <a href="#" class="pl-user-options"></a>
         <ul class="dropdown"></ul>
     </div>
    <div class="pl-options">
         <a href="#" class="pl-user-options"></a>
         <ul class="dropdown"></ul>
     </div>

点击a 后- 下拉菜单出现。

有JQuery：

$.puerto_droped = function( prtclick, prtlist = "ul.dropdown" ){
    $(prtclick).livequery('click', function(){
        var ul = $(this).parent();
        if( ul.find(prtlist).hasClass('open') ){
            ul.find(prtlist).removeClass('open');
            $(this).removeClass('active');
            if(prtclick == ".pl-mobile-menu") $('body').removeClass('active');
        } else {
            ul.find(prtlist).addClass('open');
            $(this).addClass('active');
            if(prtclick == ".pl-mobile-menu") $('body').addClass('active');
        }
        return false;
    });
    $("html, body").livequery('click', function(){
        $(prtclick).parent().find(prtlist).removeClass('open');
        $(prtclick).removeClass('active');
        if(prtclick == ".pl-mobile-menu") $('body').removeClass('active');
    });
}

prtclick -> .pl-user-options

我觉得$("html, body").livequery('click', function(){...这个功能应该可以编辑，但是没能成功实现。我尝试了很多方法，但都失败了。

我的一个尝试是：

$(prtclick).click(function(evt){   
    $(prtclick).find(prtlist).removeClass('open');
    $(prtclick).removeClass('active');
    if(prtclick == ".pl-mobile-menu") $('body').removeClass('active');
});

但现在它根本不显示子菜单。我需要对当前条目进行例外处理。你有什么想法吗？谢谢。

【问题讨论】：

你能创建上面的演示代码吗？
但是 livequery 在 7 年前就死了……你应该使用常规的事件委托。见is Livequery deprecated?
您可以使用$.not() 排除 jQuery 集合的元素。例如：$('ul.dropdown.open').not($(this).parent())...
您共享的结构是针对一项民意调查，还是 .row 是民意调查的父项？

标签： javascript html jquery

【解决方案1】：

在检查.open 类之前，您可以关闭所有其他ul.dropdowns。

$(this).closest('.row').siblings('.row').removeClass('active')
    .find('ul.dropdown').removeClass('open');

获取当前点击的a主父级，它有'row'类，获取它的兄弟姐妹，删除它们的“活动”类，在这些兄弟姐妹中获取所有ul.dropdowns 并删除那些uls 的“开放”类

【讨论】：