javascript - 如何通过 jQuery 滑动切换下拉菜单项？

Question

我有以下代码。它的作用是在点击 li 时，它的下拉菜单将向下滑动。如果单击旁边的另一个 li，另一个下拉菜单会向下滑动，然后前一个下拉菜单会向上滑动。

但是，如果我点击同一个 li 来“打开”和“关闭”它，那么下拉菜单只会在第一次点击时向下滑动，然后在第二次点击时尝试并“关闭”它，它会再次向下滑动。

所以问题是，如果我单击父链接并在之后立即再次单击它，下拉菜单会向上滑动，然后再次向下滑动。它不会保持“关闭”状态或不会切换。

这是我的代码:

$(".dropdown").click(function() {
  $("li > ul").slideUp();
  $('li > ul').not($(this).children("ul").slideToggle("swing"));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="dropdown">
  <a href="#" class="dropdown-toggle">Parent Link</a>
  <ul class="dropdown-menu">
    <li>
      <div class="my-content">
        <div class="row">
          <ul>
            <li><a href="/">dropdown link</a></li>
            <li><a href="/">dropdown link</a></li>
            <li><a href="/">dropdown link</a></li>
          </ul>
        </div>
      </div>
    </li>
  </ul>
</li>

Answer 1

我不知道你的 html 和 css 代码怎么样，但这可以提供思路。

$(".dropdown").click(function () {
  $(".dropdown > ul").slideUp();
  $(this).find("ul").slideDown();
})

li.dropdown > ul{
    display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="dropdown">
    test1
    <ul>
      <li>testa</li>
      <li>testb</li>
    </ul>
  </li>
  <li class="dropdown">
    test2
    <ul>
      <li>testc</li>
      <li>testd</li>
    </ul>
  </li>
</ul>