jquery hide dropdown depending on click

Question

I have a series of dropdown buttons, each with its own separate content holder. I want each to toggle display when clicked, but also hide display when clicking anywhere else on the page (including on one of the other buttons) other than inside the content holder.

Here is the code:

$(document).on({
  click: function (event) {
    $("#content1").toggle();
    $(document).on({
      click: function HideMenu1(event) {
        if ($(event.target).attr("id") != "content1") {
          $("#content1").hide();
          $(document).off("click", HideMenu1);
        }
      }
    });
  }
}, "#menu1");

$(document).on({
  click: function (event) {
    $("#content2").toggle();
    $(document).on({
      click: function HideMenu2() {
        if ($(event.target).attr("id") != "content2") {
          $("#content2").hide();
          $(document).off("click", HideMenu2);
        }
      }
    });
  }
}, "#menu2");

$(document).on({
  click: function (event) {
    $("#content3").toggle();
    $(document).on({
      click: function HideMenu3() {
        if ($(event.target).attr("id") != "content3") {
          $("#content3").hide();
          $(document).off("click", HideMenu3);
        }
      }
    });
  }
}, "#menu3");


<div id=menu1>Menu #1</div>
<div id=content1 style='display:none'>Contents of menu #1</div>

<div id=menu2>Menu #2</div>
<div id=content2 style='display:none'>Contents of menu #2</div>

<div id=menu3>Menu #3</div>
<div id=content3 style='display:none'>Contents of menu #3</div>

It is working... EXCEPT if you click one of the elements, click again to close it, and then try to click it a third time. Then it won't open until you click somewhere else first.

Example -- > http://jsfiddle.net/LsNZx/

I know I'm close... help!

Bic · Accepted Answer · 2014-02-25 20:15:18Z

3

Try it like this:

$('.menu').click(function () {
   $('.menu').not(this).nextUntil('.menu').hide(); 
   $(this).nextUntil('.menu').toggle();
   return false;
});

$(document).click(function () {
   $('.menu').nextUntil('.menu').hide(); 
});


<div id=menu1 class='menu'>Menu #1</div>
<div id=content1 style='display:none'>Contents of menu #1</div>

<div id=menu2 class='menu'>Menu #2</div>
<div id=content2 style='display:none'>Contents of menu #2</div>

<div id=menu3 class='menu'>Menu #3</div>
<div id=content3 style='display:none'>Contents of menu #3</div>

Fiddle

I put classes on the menu items to allow them to be easily selected. Next get all of the siblings of the menu, up until the next menu, and show them. All others should be hidden. Clicking on the document in general will close all menus.

answered Feb 25, 2014 at 20:15

Bic

3,13420 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Mike Darling Over a year ago

I forgot to say... the reason I'm not using a general document .click function is that there are lots of other functions on my page, some of which use stopPropagation() and so they would cause it not to bubble all the way up.

Bic Over a year ago

@MikeDarling You can bind the 'close all' event to anything. I bound to $(document).click() for the example, but you could put it on a container or anything else.

Bic Over a year ago

@archiehicox I had posted an incorrect version of the Fiddle. The current one functions as intended.

Mike Darling Over a year ago

@Bic - yes but that would require binding the close event to each/all of my other click functions, right? (of which I have 100s). I'm hoping there's a way to bind the hide function within the .menu click function itself, but maybe it's not possible?

Bic Over a year ago

@MikeDarling Technically, it is already bound to the menu. Clicking a menu item toggles the submenus, so they are 'self-closing'. If you want to trigger something else to close them, you would need to modify existing handlers, or create a new handler. If you create a new handler, the code has to be able to propagate to that handler. An alternative solution could be to have it automatically close on an interval, but his is heavily dependent on use cases.

Collectives™ on Stack Overflow

jquery hide dropdown depending on click

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related