Jquery. Hide other elements, except this

Question

I‘m using Pollate Template for creating polls. There is a list of user's created Polls, after clicking 3 dots (menu icon), the dropdown list shows up with the option to delete this poll. If the submenu is shown and you click anywhere on the screen it hiding.

But I found a bug, that if you clicking on another sub-menu icon it not hiding other sub-menus (look at the image below).

It should be hidden when clicking anywhere, even if it's a sub-menu icon of another entry.

There is HTML structure:

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

After clicking a - dropdown shows up.

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

I think that this function $("html, body").livequery('click', function(){... should be edited, but can't achieve it successfully. I've tried in many ways but failed.

One of my tries was:

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

But now it not showing sub-menu at all. I need to make an exception for the current entry. Have you any ideas? Thank you.

But livequery died 7 years ago... You should use regular event delegation. See [is Livequery deprecated?](https://stackoverflow.com/questions/7675526/is-livequery-deprecated) — Jeremy Thille, Sep 09 '20 at 12:49
You can exclude a element of the *jQuery* collection with `$.not()`. Ex.: `$('ul.dropdown.open').not($(this).parent())...` — Obzi, Sep 09 '20 at 12:56
the structure youve shared is for one poll or the `.row` is parent of polls? — AbbasEbadian, Sep 09 '20 at 13:02

score 0 · Answer 1 · answered Sep 09 '20 at 13:11

Before you check for .open class, you can toggle off all other ul.dropdowns.

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

Get current clicked a main parent which has 'row' class, get its siblings, remove 'active' class of them, get all ul.dropdowns inside those siblings and remove 'open' class of those uls

Jquery. Hide other elements, except this

1 Answers1