On click function close all open

Question

I have a menu that opens hidden divs using on click function. Id like to make them close when clicking outside of the toggled divs. I've tried few things but it renders a click function so it doesn't close hidden div when clicked again.

$(document).on('click', '.user-alt > li > a', function(e){
   var popup = $(this).parent('li').find('.bar-pop');
   $(".user-alt > li .bar-pop").not(popup).hide();
   $('.menu-accountparent.selectedMenuItem').not($(this)).removeClass('selectedMenuItem');
   $(this).toggleClass('selectedMenuItem');
   popup.toggle();
});

Here is JSfiddle: http://jsfiddle.net/fkrosq8w/

I've tried these and works but like I said clicking on link in menu again does not close hidden box:

$('body').on('click', '*:not( .user-alt > li .bar-pop )', function() {
    var popup = $('.user-alt > li .bar-pop');
    popup.hide();
});

Detect click on the whole document, if the click not inside your menu, then close it. Also possible duplicate of 2-3 questions out there. — Szabolcs Páll, Aug 23 '15 at 20:06
possible duplicate of [How to detect a click outside an element?](http://stackoverflow.com/questions/152975/how-to-detect-a-click-outside-an-element) — Szabolcs Páll, Aug 23 '15 at 20:07
That does not help me as my code is using On Click instead of just Click function, also http://css-tricks.com/dangers-stopping-event-propagation/ — damir gasparlin, Aug 23 '15 at 20:22

score 1 · Accepted Answer · answered Aug 23 '15 at 21:12

1

Hope this helps you

$(document).on('click', function (e) {
var click = $('a');
var pop = $('.bar-pop');
 if (!click.is(e.target) && click.has(e.target).length === 0)
{
    pop.hide();
}

});

jsfiddle

answered Aug 23 '15 at 21:12

techguy

77
6

James Hibbard · Answer 2 · 2015-08-24T13:49:14.450

Edit:

In light of your comment, it might be worth simplifying your markup and doing this in a more simple way. I'm not sure how much control you have over your markup, but maybe this will help:

Given this markup (I've added a class of toggle to the anchor tags):

<ul class="user-alt">
  <li class="messages">
    <a title="Messages" class="toggle" href="#">Open/Close</a> 
    <div class="bar-pop"> 
      Hidden block Here
    </div>
  </li>
  <li class="messages">
    <a title="Messages" class="toggle" href="#">Open/Close</a> 
    <div class="bar-pop"> 
      Hidden block Here
    </div>
  </li>
  <li class="messages">
    <a title="Messages" class="toggle" href="#">Open/Close</a> 
    <div class="bar-pop"> 
      Hidden block Here
    </div>
  </li>
</ul>

Hide div.bar-pop by default:

.bar-pop{
    display:none;
    border:1px solid #ccc;
    padding:10px;
}

Then toggle them backwards and forwards like so:

$('.toggle').on('click', function(e){
  e.preventDefault();
  $(this).next().toggle();
});

Then, listen for clicks on the document (or body if you wish), inspect the class name of the element where the click came from and react accordingly: if the class name matches toggle or bar-pop, do nothing, otherwise hide any visible popups.

$(document).on("click", function(e){
  if(!e.target.className.match(/toggle|bar-pop/)){
    $(".bar-pop").hide();   
  }
});

Here's an updated demo.

~~You can do it like so:~~

$(document).on("click", function(e){
   if ($(".bar-pop").length && !e.target.className.match(/selectedMenuItem|bar-pop/)){
       $(".selectedMenuItem").removeClass('selectedMenuItem');
       $(".bar-pop").hide();
   }
});

Demo

That works like my second code I added but had to change $(document) to $('body'). But again clicking on the link itself second time does not close hidden box. — damir gasparlin, Aug 23 '15 at 20:33

On click function close all open

2 Answers2