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>

如果单击子项，如何阻止动画？

1 个答案: