当我点击菜单之外时如何隐藏多个jQuery toggle（）？ [英] How to hide multiple jQuery toggle() when I click outside of the menu?

问题描述

我的网页上有多个切换元素。我试图在点击div元素的外部时关闭它们。我现在使用的脚本和多个元素一样好用，但是它在点击div内时也关闭div

 < UL> 
 
< li class =menuContainer> 
< a class =tophref =＃>菜单< / a> 
< div class =sub> 
< a class =tophref =google.com>项目在下拉菜单中点击此处时有效的网址div.sub应该保持关闭状态< / a> 
< / div> 
< / li> 
< li class =menuContainer> 
< a class =tophref =＃>菜单< / a> 
< div class =sub>点击此处时，下拉菜单中的
< a class =tophref =＃>项div.sub应保持打开状态< / a> 
< / div> 
< / li> 
  

  
 $（'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（）; 
 $（ （click，function（event）{};}} .hide（）; 
 return false; 
}）; 
 $（li.menuContainer div.sub）。 
 event.stopPropagation（）; 
}）; 
 
}）; 
 
 
 
 $（document）.on （click，function（）{
 $（li.menuContainer div.sub）。hide（）; 
 
}）; 
 
}） ; 
  

我想要做的就是在里面点击时停止关闭div。任何帮助吗？

解决方案

使用此代码

点击（功能（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，$下拉式）.click（函数（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（）; 
}）; 
  

您可以使用

 （$。$（li.menuContainer）。（e.target））//如果目标点击不是容器... 
&& $（li.menuContainer）。has（e.target）.length === 0）// ...也不是容器
 {
 $（li.menuContainer div.sub）。slideUp（）; 
} 
}）; 
  

工作演示

更新：

<$ p （'click'，function（e）{
e.preventDefault（）; //防止页面重新加载（$ p $ $（div.sub> a.top）。
e.stopPropagation（）; //防止父点击
alert（'Here We Are :)'）;
}）;


工作演示

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?

解决方案

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

这篇关于当我点击菜单之外时如何隐藏多个jQuery toggle（）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！