javascript - 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>