javascript - 在两个或多个 ul 列表之间切换，如果一个被点击，其他列表会自动返回初始状态，就像从未点击过一样

Question

如果我单击第一个 ul 列出它的 li 的 slideToggle() 并且如果我单击第二个 ul 列出它的 li 的 slideToggle() 但是，第一个 ul 列表也会显示。我想如果单击第一个 ul 列表，第二个 ul 列表 li 必须自动消失，因此单击第二个 ul，第一个 ul li 必须消失。我的代码是

$("document").ready(function(){
		$("#block1").click(function(){
			$("#none1, #none2, #none3").slideToggle();
		} );
		$("#block2").click(function(){
			$("#none4, #none5, #none6").slideToggle();
		} );
	});

#none1, #none2, #none3, #none4, #none5, #none6{
		display: none;
	}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<ul id="first">
  <li id="block1"><a href="#">Block1</a></li>
  <li id="none1">None1</li>
  <li id="none2">None1</li>
  <li id="none3">None1</li>
</ul>

<ul id="second">
  <li id="block2"><a href="#">Block2</a></li>
  <li id="none4">None2</li>
  <li id="none5">None2</li>
  <li id="none6">None2</li>
</ul>

Answer 1

一个简化版本，可以使用 siblings() 满足您的需求和 not()以其他“ block ”元素为目标

$(function(){
    var $blocks = $('#block1, #block2').click(function(){
        // slide up all siblings of other block(s)
        $blocks.not(this).siblings().slideUp();
        // toggle slide this one
        $(this).siblings().slideToggle();
    });
});

DEMO