Question

我有一个脚本，当通过向父（.bob）添加类（.settings-active）来点击目标（#dave）时切换子菜单。

也可以通过点击目标外的任何地方及其子项来删除.settings-active类。

我遇到的问题是，当点击目标时会显示一个子菜单（.dd），但是当我尝试单击子菜单项（.one，.two）时，子菜单会因else语句触发而消失。 / p>

我的问题有两个：

我可以将目标设置为查找类（.dave）而不是像目前正在执行的ID。
如何在单击子菜单项时保持子菜单保持打开状态

提前谢谢

$('html').click(function(e) {
  if (e.target.id == 'dave') {
    $('.bob').toggleClass('settings-active');
  } else {
    $('.bob').removeClass('settings-active');
  }
});

.settings-active {
  color: red;
}
.dd {
  display: none;
}
.settings-active .dd {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="bob">

  <div id="dave">
    Target
    <div class="dd">
      <div class="one">one</div>
      <div class="two">two</div>
    </div>
  </div>

</div>

Answer 1

您可以直接使用id附加click事件而不是html：

$('.dave').click(function(e) {  
    $('.bob').toggleClass('settings-active');
});

您可以使用.stopPropagation()来阻止子菜单消失：

$('.dave').click(function (e) {
    $('.bob').toggleClass('settings-active');
});

$('.dd div').click(function (e) {
    e.stopPropagation();
    alert('clicked on: ' + $(this).html());
});

$('body').click(function (e) {    
    if (!$(e.target).hasClass("dave")) {
        $('.bob').removeClass('settings-active');
    }
});

阻止事件冒泡DOM树，防止任何父处理程序收到事件通知。

https://api.jquery.com/event.stoppropagation/

DEMO：https://jsfiddle.net/xk8ntmyh/2/

使用e.target.id匹配目标和子项

1 个答案: