手风琴恢复默认 - 仅限 JavaScript答案

【问题标题】：Accordion back to default - javascript only手风琴恢复默认 - 仅限 JavaScript
【发布时间】：2020-03-19 16:51:50
【问题描述】：

我正在尝试编写手风琴代码，但是当尝试将其设置为默认外观时（第二次单击同一列表项时没有显示段落），即使我将它作为切换，也没有任何反应

由于某种原因，切换并没有真正起作用，并且总是显示其中一个段落。探索手风琴后如何让它们全部回到“隐藏”状态？

谢谢

  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>

【问题讨论】：

标签： javascript accordion

【解决方案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

【讨论】：