javascript - jQuery on click 函数 To li 和嵌套 li

Question

我有一个点击功能，基本上可以在点击时关闭菜单上的幻灯片，然后转到网址，这样看起来更好。在 li 标签的父集上效果很好，但在嵌套标签上则不然。看起来 href 在单击嵌套的 li 和父级时返回，因此失败。

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 标签，并且点击事件可能是在内部标签之前从外部标签触发的。

您始终可以将其更改为“a”标签，并为单个偶数监听器使用委托(delegate)

委托(delegate)方法还可以修复“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;
         });
});