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

如果我单击第一个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>

最佳答案

简化的版本应使用siblings()和not()来满足其他“块”元素的要求

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