How to hide multiple jQuery toggle() when I click outside of the menu?

I have multiple toggle elements on my page. I am trying to get them closed when clicking on the outside of the div element. the script i have now works veyr well with multiple elements but it also closes the div when clicking on inside of the div

   <ul>      

<li class="menuContainer">
  <a class="top" href="#">Menu</a>   
  <div class="sub"> 
    <a class="top" href="google.com">item in dropdown menu with valid   url when clicked here div.sub should stay close</a>
 </div>
</li>
 <li class="menuContainer">
   <a class="top" href="#">Menu</a>   
    <div class="sub"> 
     <a class="top" href="#">item in dropdown menu when clicked here div.sub should stay open</a>
   </div>
</li>  

$(document).ready(function(){

$('li.menuContainer').each(function() {
var $dropdown = $(this);

$("a.top", $dropdown).click(function(e) {
  e.preventDefault();
  $div = $("div.sub", $dropdown);
  $div.toggle();
  $("li.menuContainer div.sub").not($div).hide();
  $( "#effect" ).hide();
  return false;
});
 $("li.menuContainer div.sub").on("click", function (event) {
    event.stopPropagation();
});

});



$(document).on("click", function (){
  $("li.menuContainer div.sub").hide();

});

});

what i want to do is to stop closing div when clicked inside of it. Any help please?

Answers


I think you are looking for e.stopPropagation();. Use it in an event on the child items.

This will stop the event from propagating to the parent div.


In your code the problem is inside the following function, now corrected:

$('html').click(function(event){
    var ele = event.target.tagName + '.' + event.target.className;
    if (ele != 'DIV.sub') {
        $("li.menuContainer div.sub").hide();
    }
});

Like you can see now when you click on whatever html element a check is done to prevent the undesired action.


use this code

$("li.menuContainer > a.top").click(function(e) {
  e.preventDefault();
  $div = $(this).next("div.sub");
  $("li.menuContainer div.sub").not($div).slideUp();
  $div.slideDown();
});

instead of

$('li.menuContainer').each(function() {
 var $dropdown = $(this);

 $("a.top", $dropdown).click(function(e) {
  e.preventDefault();
  $div = $("div.sub", $dropdown);
  $div.toggle();
  $("li.menuContainer div.sub").not($div).hide();

  return false;
 });

});

and about

$('html').click(function(){
  $("li.menuContainer div.sub").hide();
});

you can use

$(window).on('click',function(e){
   if (!$("li.menuContainer").is(e.target) // if the target of the click isn't the container...
      && $("li.menuContainer").has(e.target).length === 0) // ... nor a descendant of the container
  {
     $("li.menuContainer div.sub").slideUp();
  }
});

Working Demo

Update:

$("div.sub > a.top").on('click',function(e) {
    e.preventDefault(); // prevent page from reloading
    e.stopPropagation(); // prevent parent click
    alert('Here We Are :)');
  });

Working Demo


Need Your Help

Using C++ code in a C program and Vice-Versa

c++ c gcc g++ dynamic-linking

I'm currently writing an interface between a very low level C program to a higher level C++ program. The way they relate is through a linked list: The C program has a linked list, and the interface

was deallocated while key value observers were still registered with it

ios objective-c

Im having issues with this KVO-coding. In the code below I was first scanning for changes in key currentLocation, which was working fine but yet was calling getData twice, because, I presume, CLLoc...