使用jQuery刪除/添加類到主體

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：“ 使其余處理程序不被執行，並防止事件使DOM樹冒泡 。” 鏈接

$('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指出的那樣，應首先將$（'botton'）固定為$（'button'）。

使用jQuery刪除/添加類到主體

問題描述

3 個解決方案

解決方案1
1 2015-09-12 18:41:17

解決方案2
1 2015-09-12 18:44:40

解決方案3
1 已采納 2015-09-12 19:21:08

使用jQuery刪除/添加類到主體

問題描述

3 個解決方案

解決方案1 1 2015-09-12 18:41:17

解決方案2 1 2015-09-12 18:44:40

解決方案3 1 已采納 2015-09-12 19:21:08

解決方案1
1 2015-09-12 18:41:17

解決方案2
1 2015-09-12 18:44:40

解決方案3
1 已采納 2015-09-12 19:21:08