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

toggle between two or more ul lists that if one is click others lists automatically return in initial state like never clicked

本文关键字：列表 单击 初始状态 返回 一样 其他 之间 UL 两个 如果 一个      更新时间：2023-09-26

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

演示

问题是在事件处理程序中，你只告诉代码显示某些元素，而不是隐藏其他元素。

您可以通过执行以下操作来解决此问题：

$("document").ready(function(){
    $("#block1").click(function(){
        $("#none1, #none2, #none3").slideToggle();
        if($('#none4').is(':visible')) { // block 2 lis are visible
          $("#none4, #none5, #none6").slideToggle();
        }
    });
    $("#block2").click(function(){
        $("#none4, #none5, #none6").slideToggle();
        if($('#none1').is(':visible')) { // block 1 lis are visible
          $("#none1, #none2, #none3").slideToggle();
        }
    });
});

这是一个有效的代码笔

相关文章：