javascript - 使用 jquery 删除/添加类到主体

标签 javascript jquery

我遇到了问题,我有一个 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 类。

最佳答案

为了避免在 div 内部单击时添加隐藏类,您可以在重新添加隐藏类之前检查单击事件是否来自 div 内的元素。 jQuery.closest() 可用于此目的。

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

正如 MysterX 指出的,$('botton') 应该首先被修复为 $('button')。

关于javascript - 使用 jquery 删除/添加类到主体,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32542369/

相关文章:

javascript - 浏览器如何显示链接的目标 url

Jquery 自动完成在 Bootstrap 模型中不起作用

javascript - 将 YouTube 图像占位符替换为视频

javascript - Javascript中promise和@@iterator的问题

javascript - jquery ui 对话框上的 window.getSelection 不会返回 Safari 中的选择

javascript - 当我的脚本运行时 Google Chrome 卡住

c# - 使用 jquery 在 html 表中显示来自模型(字典)的数据

javascript - 服务器立即返回ajax post,而不执行重定向代码

javascript - 如何合并状态和 Prop ,然后将它们作为 Prop 传递?

javascript - 使用 ScrollMagic 在 iOS Safari 上的全高视差页面上滚动时,引脚会跳​​动