Как скрыть несколько jQuery toggle(), когда я выхожу за пределы меню?

Question

У меня есть несколько элементов переключения на моей странице. Я пытаюсь закрыть их при нажатии на элемент div. сценарий у меня теперь работает veyr хорошо с несколькими элементами, но она также закрывает DIV при нажатии внутри 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(); 

}); 

}); 

то, что я хочу сделать это, чтобы остановить закрытие DIV при нажатии внутри него. Любая помощь, пожалуйста?

Answer 1

Я думаю, вы ищете e.stopPropagation();. Используйте его в случае с дочерними элементами.

Это остановит событие от распространения до родительского div.

Answer 2

использовать этот код

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

вместо

$('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; 
}); 

}); 

и о

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

вы можете использовать

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

Answer 3

В коде проблема внутри следующей функции, теперь исправлено:

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

Как вы можете видеть сейчас, когда вы нажимаете на любой элемент html проверяется, чтобы предотвратить нежелательное действие.