1

Basically, I have a dropdown menu that works individually and when you click on the button it opens, if you click on it again it closes. Now if i was to open another one at the same time then I have the issue of they are both open. enter image description here

Now I'm certain that it must be really simple to close them before the isntances are open. However if you look at this fiddle: http://jsfiddle.net/g2c10t53/

If i was to simply remove all occurances with some JQuery:

$('.dropdown-toggle').attr('aria-expanded',false);
$('.dropdown-menu').removeClass('open');

Although this would in theory make it work, I cannot now click on the same button I have opened to close it. It simply does nothing, so I could remove: 

$('.dropdown-toggle').attr('aria-expanded',false);

But then if i was to start swapping between buttons I have a problem where I have to click twice to open the other dropdown menu which I do not want to do.

I've been trying to find a way where I can go through .each() occurrence of $('.dropdown-toggle') to check if it's attribute ID is equal to the one that is clicked and if not remove the occurrence of said dropdown and change the aria-expaned to false but i've had no luck.

Any suggestions? Thanks.

mdixon18
  • 1,199
  • 4
  • 14
  • 35
  • can there be more `button` `ul` pairs in `.btn-group`? do you want to close all other menus, when clicking on any other button in the page? or only colapsing one's? – reyaner Dec 04 '14 at 22:21
  • This question should help: http://stackoverflow.com/questions/2868582/click-outside-menu-to-close-in-jquery – Phil Tune Dec 04 '14 at 22:22

2 Answers2

2

So here's my stab at it:

Fiddle goes here

What we did was change how you're calculating which elements to fire on:

IF BLOCK

if ($(this).attr('aria-expanded') === "false") {
  var menuID = $(this).attr('id'),
      parentScope = $(this).parent().parent();
  parentScope.find('ul').removeClass('open').attr('aria-expanded', false);
  parentScope.find('ul[aria-labelledby=' + menuID + ']').addClass('open')
  parentScope.find('button[aria-expanded=true]').attr('aria-expanded', false);
  $(this).attr('aria-expanded', true);
}

The parentScope variable can be populated by any node that exists higher in the document hierarchy than the menu, so reasonably you could substitute the line

var parentScope = $(this).parent().parent();

with something like

var parentScope = $(document.body);

We're making sure that we're selecting all your ul elements with this, before .siblings() was being constrained by the div.btn-group elements.

Hope that helps.

Josh Burgess
  • 9,327
  • 33
  • 46
  • This works well but I want it to make any open across the entire page not just in the same section. Looking just within the parent scope wouldn't be ideal as what if one dropdown was in the navigation bar and one elsewhere in the content of the page. – mdixon18 Dec 04 '14 at 22:30
  • 1
    @Matthew – The `parentScope` is an arbitrary container. Try setting it to `$(document.body)` and it'll still work. – Josh Burgess Dec 04 '14 at 22:31
  • Yeah, i was just in the process of changing the JS fiddle to update and comment in here in case anyone else has a similar issue. However your comment works for this. Thank you for the responses. – mdixon18 Dec 04 '14 at 22:36
2

You want to know when user has clicked outside of your element to untoggle:

$(document).click(function(e){
    if($('#menuONE').has(e.target).length === 0) {
        // toggle menu to close
    }
});

This is the default way I've seen most sites handle closing a menu when the user clicks away from it. You're detecting all clicks and determining if the click was outside of your element. #menuONE would be your menu element. If the user clicks on it, you don't want the menu to close.

Phil Tune
  • 3,154
  • 3
  • 24
  • 46
  • That wasn't at all what I was going for in my question however, it's a great comment to add to this for anyone looking to adapt this code to exactly that. I'll vote it. – mdixon18 Dec 04 '14 at 22:41