jQuery on单击功能To li和nested li

Question

我有一个单击功能，基本上可以在单击时关闭菜单上的幻灯片，然后转到URL，因此看起来更好。 在父标签的li标签上效果很好，但在嵌套的li标签上却没有。 似乎嵌套嵌套的li单击时返回了href ，父级单击了href因此它失败了。

jQuery代码：

$('#menu-pages li').on('click', function(event) {
  event.preventDefault();
  /* Act on the event */
  var href = $(this).children('a').attr('href');
  page.toggleClass('menu-open');
  mobileMenu.toggleClass('mobile-menu-open');

  page.one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) {
    window.location = href;
  });
});

HTML代码：

<div id="menu-pages">
  <li><a href="/dashboard/">My Dashboard</a></li>
  <li><a href="/Community/">Community</a>
    <ul class="sub-menu">
      <li><a href="/forum/">forum</a></li>
      <li><a href="/messages/">Messages</a></li>
      <li><a href="/groups/">groups</a></li>
    </ul>
  </li>
  <li><a href="/teachings/">Teachings</a>
    <ul class="sub-menu">
      <li><a href="/teachings/?category=Creativity">Creativity</a></li>
      <li><a href="/teachings/?category=Craft">Craft</a></li>
      <li><a href="/teachings/?category=Coaching">Coaching</a></li>
      <li><a href="/teachings/?category=Conversations">Conversations</a></li>
      <li><a href="/checklists/">Checklists</a></li>
    </ul>
  </li>
</div>

Answer 1

您有嵌套的li标签，而click事件可能是由内部标签之前的外部标签触发的。

您可以随时将其更改为“ a”标签，也可以将委托用于单个监听器

委托方法还可以解决“ li”标签点击事件的顺序，因为它会从子元素中冒出

 $('#menu-pages').on('click', 'a', function(event) {

         event.preventDefault();
         /* Act on the event */
         var href = $(this).attr('href');

         page.toggleClass('menu-open');
         mobileMenu.toggleClass('mobile-menu-open');

         page.one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) {
              window.location = href;
         });
});

Answer 2

在event.preventDefault() event.stopPropagation()之前使用event.stopPropagation()可阻止事件冒泡。

这样，如果单击内部li ，它将不执行该操作，然后单击父li 。

---

有关更多信息，请考虑以下资源：

• jQuery的
• MDN