jquery - 如果单击子项，如何防止动画？

Question

我正在尝试制作一个简单的侧边栏菜单。这个想法是，当我点击一个项目时，我希望其他菜单项的子菜单到 slideUp，因此隐藏它们。这行得通。但是，如果单击子项，我不希望动画运行。

我的 HTML 看起来像这样:

<ul id="menu-work-sidebar" class="menu">
  <li id="menu-item-41" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-41">Landscape
    <ul class="sub-menu">
      <li id="menu-item-58" class="menu-item menu-item-type-post_type menu-item-object-work menu-item-58">Test1
      </li>
    </ul>
  </li>
  <li id="menu-item-42" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-ancestor current-menu-parent menu-item-has-children menu-item-42"><a href="#">Portraits</a>
    <ul class="sub-menu">
      <li id="menu-item-57" class="menu-item menu-item-type-post_type menu-item-object-work current-menu-item menu-item-57">Test2
      </li>
    </ul>
  </li>
  <li id="menu-item-47" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-47">Still life
  </li>
</ul>

我的脚本是这样的:

$('#work-sidebar').on('click', '.menu-item-type-custom', function() {

    $(this).siblings().children('.sub-menu:visible').slideUp();
    $(this).children('.sub-menu').stop().slideToggle();
});

我已经为此奋斗了几个小时，但无论我做什么我都无法让它工作。我该如何解决这个问题？

Answer 1

你需要告诉 jquery 在每次单击菜单项时切换幻灯片，并且你需要告诉 jquery 在你单击子菜单项时停止事件传播:

$('#menu-work-sidebar > li').on('click', function() {
  $(this).siblings().children('.sub-menu:visible').slideUp();
  $(this).children('.sub-menu').stop().slideToggle();
});
$('#menu-work-sidebar > li > ul > li').on('click', function() {
  event.stopPropagation();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menu-work-sidebar" class="menu">
  <li id="menu-item-41" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-41">Landscape
    <ul class="sub-menu">
      <li id="menu-item-58" class="menu-item menu-item-type-post_type menu-item-object-work menu-item-58">Test1</li>
    </ul>
  </li>
  <li id="menu-item-42" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-ancestor current-menu-parent menu-item-has-children menu-item-42"><a href="#">Portraits</a>

    <ul class="sub-menu">
      <li id="menu-item-57" class="menu-item menu-item-type-post_type menu-item-object-work current-menu-item menu-item-57">Test2</li>
    </ul>
  </li>
  <li id="menu-item-47" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-47">Still life</li>
</ul>