Question

我有以下代码。它的作用是点击0:00时，它的下拉列表会向下滑动。如果单击其旁边的另一个li，则会向下滑动另一个下拉菜单，然后向上滑下来。

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

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

这是我的代码：

li

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

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>

Answer 2

如果我理解正确，您可以点击父链接以下拉所有子菜单，点击一个子菜单，向上滑动，然后向下滑动其他菜单。

请参阅以下代码的评论以获取详细信息：

＆＃13;

$(".dropdown > ul").click(function(e) {
  $("li > ul").slideUp(); //slide up the menu which user clicked
  $('li > ul').not($(this)).slideDown(); //slide down other menu except the one user clicked
  $(this).children("ul").slideToggle("swing");
  e.stopPropagation(); //prevents the click event from bubbling up the DOM tree
});

$(".dropdown").click(function(e) {
  $("li > ul").slideDown(); //slide down for all child ul
});

＆＃13;

<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</a></li>
            <li><a href="/">dropdown link A</a></li>
            <li><a href="/">dropdown link A</a></li>
          </ul>
        </div>
      </div>
    </li>
  </ul>
  <ul class="dropdown-menu">
    <li>
      <div class="my-content">
        <div class="row">
          <ul>
            <li><a href="/">dropdown link B</a></li>
            <li><a href="/">dropdown link B</a></li>
            <li><a href="/">dropdown link B</a></li>
          </ul>
        </div>
      </div>
    </li>
  </ul>
</li>

＆＃13;

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

2 个答案: