jQuery on click function to li和nested 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标签，而click事件可能是从内部标签之前的外部标签触发的。

您可以随时将其更改为＆＃34; a＆＃34;标记，并为单个偶数监听器使用委托

委托方法也可以修复＆＃34; li＆＃34;标记点击事件顺序，因为它将从子元素冒泡

 $('#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.stopPropagation()之前使用event.preventDefault()来阻止事件冒泡。

这样，如果您点击内部li，则不会执行该操作，然后执行父li。

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

• jQuery
• MDN