Accordion回到默认状态-仅适用于javascript

Question

我正在尝试编码一个手风琴，但是当尝试使其达到默认外观时（在同一列表项的第二次单击中没有显示段落），即使我将其作为切换按钮，也不会发生任何事情

出于某种原因，切换开关实际上无法正常工作，并且始终显示其中一个段落。探索手风琴后如何让他们都回到“隐藏”状态？

谢谢

  var list = document.querySelector("ul");
			var listItems = document.querySelectorAll("li");

			for(var i=0; i<listItems.length; i++){
				listItems[i].addEventListener("click", show);        }

			
			function show(){
				var p = document.querySelectorAll("p");
				var num = this.dataset.num;
      
				for(var j=0; j<p.length; j++){
                      p[j].classList.add("hidden");   
                  }

				p[num].classList.toggle("hidden");   
				}

 	ul {list-style: none;
			margin-left:30px;
			width:300px;
			height:300px;}

		li{ border:1px solid red;
		width:298px;
		height:80px;
		background-color: grey; }

		p{ width:299px;
			height:80px;
			background-color: lightgrey;}

		.hidden{ display:none; }

	<ul>
		<li data-num="0">Home
			<p class="hidden">Lorem ipsum dolor sit amet elit. </p>
		</li>
		<li data-num="1">Career
			<p class="hidden">Aenean sed ipsum libero. Praesent nisl id viverra.</p>
		</li>
		<li data-num="2">Contacts
			<p class="hidden">Nullam tristique ex eu libero sodales posuere.</p>
		</li>
	</ul>

   

Answer 1

假设您单击并显示一个段落，然后再次单击它，然后在for循环中您将隐藏所有段落，因此可见的段落将被隐藏，但是在for循环之后的下一行中，您将切换隐藏的内容，因此它将再次显示。

显示功能应该是这样

    function show() {
        var p = document.querySelectorAll("p");
        var num = this.dataset.num;

        for (var j = 0; j < p.length; j++) {
            if (j != num) {//Check this if
                p[j].classList.add("hidden");
            }
        }

        p[num].classList.toggle("hidden");
     }

在for循环中，我们隐藏了除单击的段落之外的所有段落，然后在for循环之后，切换了被单击的段落的类（因此，如果隐藏了该段落，则显示出来，如果显示，则它将隐藏）。

Fiddle