Question

我陷入困境我有一个div，我想在按钮上显示并隐藏点击任何其他地方。但是在div类的主体内点击也会隐藏，我不想要。

<body>
<ul>
    <li> test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li> <button>click</button>
<div id="test" class="hidden">
     <ul>
       <li> test</li>
       <li>test</li>
       <li>test</li>
      <li>test</li>
   </ul>
</div>
</li>
</ul>
</body>

<script>
$('botton').click(function(){
  $('#test').removeClass('hidden');
});
$('body').click(function(){
  $('#test').addClass('hidden');
});

</script>

如何通过在div中单击来禁用添加hidden类。

Answer 1

使用stopImmediatePropagation：＆＃39; 保持其余处理程序不被执行，并防止事件冒泡DOM树。＆＃39; link

$('button').click(function(e){
  $('#test').removeClass('hidden');
  e.stopImmediatePropagation();
});

$('body').click(function(e){
  $('#test').addClass('hidden');
  e.stopImmediatePropagation();
});

Answer 2

首先：您有botton而不是button

第二：解决问题的方法是检查点击了哪个元素：

$('button').click(function(){
    $('#test').removeClass('hidden');
});
$('body').click(function(event){
    if(!$(event.target).is('button')){
        $('#test').addClass('hidden');
    }
});

Answer 3

为避免在div中单击时添加隐藏类，可以在将隐藏类添加回之前检查click事件是否来自div内的元素。 jQuery.closest（）可用于此目的。

$('body').click(function(event){
if ($(event.target).closest('#test').length == 0)
  $('#test').addClass('hidden');
});

正如MysterX指出的那样，$（＆＃39; botton＆＃39;）应首先固定为$（＆＃39;按钮＆＃39;）。

使用jquery删除/添加类到body

3 个答案: