JQuery slidetoggle嵌套列表关闭打开列表不起作用

Question

我有一个简单的嵌套列表，如下所示：

<ul class='main'>
  <li class='mainlink'><a href='#'>Main 1</a>
    <ul class='sub'>
      <li><a href='#'>Sub 1-1</a>
        <li><a href='#'>Sub 1-2</a>
          <li><a href='#'>Sub 1-3</a>
    </ul>
    </li>
    <li class='mainlink'><a href='#'>Main 2</a>
      <ul class='sub'>
        <li><a href='#'>Sub 2-1</a>
          <li><a href='#'>Sub 2-2</a>
            <li><a href='#'>Sub 3-3</a>
      </ul>
      </li>
      <li class='mainlink'><a href='#'>Main 3</a>
        <ul class='sub'>
          <li><a href='#'>Sub 3-1</a>
            <li><a href='#'>Sub 3-2</a>
              <li><a href='#'>Sub 3-2</a>
        </ul>
        </li>
</ul>

这是我的 jQuery：

$( ".mainlink" ).click(function() { 
    var child = $(this).children('.sub');
    var rest = $('.sub:visible').not(child);     
    child.slideToggle();
    rest.slideUp();    
});

单击.mainlink 应打开其子列表.sub 并关闭所有其他打开的子列表。这部分按预期工作，但在打开 .sub 的情况下单击 .mainlink 会关闭 .sub 并在之后立即打开它，而不是在下一次单击发生之前保持关闭状态。

问题可能很容易解决，但我显然无法找到正确的方法。感谢您的帮助。

拉尔夫

Answer 1

试试这个：

$(document).ready(function(){
   $( ".mainlink > a" ).click(function() { 
        $('.main .sub').not($(this)).slideUp();
        var child = $(this).parent().children('.sub');
        if(!child.is(":visible")){
            child.slideDown();      
        }    
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class='main'>
<li class='mainlink'><a href='#'>Main 1</a>
<ul class='sub' style='display:none'>
<li><a href='#'>Sub 1-1</a>
<li><a href='#'>Sub 1-2</a>
<li><a href='#'>Sub 1-3</a>
</ul>
</li>
<li class='mainlink'><a href='#'>Main 2</a>
<ul class='sub' style='display:none'>
<li><a href='#'>Sub 2-1</a>
<li><a href='#'>Sub 2-2</a>
<li><a href='#'>Sub 3-3</a>
</ul>
</li>
<li class='mainlink'><a href='#'>Main 3</a>
<ul class='sub' style='display:none'>
<li><a href='#'>Sub 3-1</a>
<li><a href='#'>Sub 3-2</a>
<li><a href='#'>Sub 3-2</a>
</ul>
</li>
</ul>

Answer 2

关闭所有.sub，然后打开用户选择的.sub

演示

$(".mainlink a").on('click', function() {
  var subMenu = $(this).next('.sub');
  $('.sub').slideUp();
  if (subMenu.is(':visible')) {
    subMenu.slideUp();
  } else {
    subMenu.slideDown();
  }
});

<ul class='main'>
  <li class='mainlink'>
    <a href='#'>Main 1</a>
    <ul class='sub' style='display:none'>
      <li><a href='#'>Sub 1-1</a></li>
      <li><a href='#'>Sub 1-2</a></li>
      <li><a href='#'>Sub 1-3</a></li>
    </ul>
  </li>
  <li class='mainlink'>
    <a href='#'>Main 2</a>
    <ul class='sub' style='display:none'>
      <li><a href='#'>Sub 2-1</a></li>
      <li><a href='#'>Sub 2-2</a></li>
      <li><a href='#'>Sub 3-3</a></li>
    </ul>
  </li>
  <li class='mainlink'>
    <a href='#'>Main 3</a>
    <ul class='sub' style='display:none'>
      <li><a href='#'>Sub 3-1</a></li>
      <li><a href='#'>Sub 3-2</a></li>
      <li><a href='#'>Sub 3-2</a></li>
    </ul>
  </li>
</ul>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>