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并立即重新打开它，而不是保持关闭状态直到下一次点击发生。

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

Ralf

- Ralf

Answer 1

try this:

$(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>

- Saeed Ahmadian

---

谢谢您的回复，但是没有运气：点击打开菜单会将其关闭，并在立即重新打开。 - Ralf

太棒了！现在一切都很顺利！非常感谢，Saeed。 - Ralf

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>

- zer00ne

---

嗨zerOOne，感谢您的建议，您的代码也很好用。由于我已经将Saeed的答案标记为正确答案，因此我只能投票支持。编辑：可惜我的声望太低，甚至无法投票。有时候规则真是奇怪。 - Ralf

没问题，@Ralf，谢谢你的体贴。祝编码愉快。 - zer00ne