Аккордеон возвращается к умолчанию - только javascript - PullRequest
Новая
       9

Аккордеон возвращается к умолчанию - только javascript

0 голосов
/ 19 марта 2020

Я пытаюсь закодировать аккордеон, но при попытке вернуть его к виду по умолчанию (ни один абзац не отображается при втором щелчке на том же элементе списка), ничего не происходит, даже если у меня есть его как переключатель

По некоторым причинам переключение на самом деле не работает, и всегда есть один из абзацев, показывающих. Как я могу вернуть их обратно в «скрытое» после изучения аккордеона?

Спасибо 

  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>

1 Ответ

0 голосов
/ 19 марта 2020

Скажем, вы щелкнули и показали абзац, а затем щелкните его снова, затем внутри для l oop вы скрываете все абзацы, поэтому видимый абзац будет скрыт, но в следующей строке после для l oop Вы переключаете скрытое, поэтому оно снова появляется.

Функция показа должна быть такой 

    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");
     }

внутри для l oop мы скрываем все абзацы, кроме нажатых один, а затем после для l oop мы переключаем класс кликаемого абзаца (поэтому, если он скрыт, то появляется, если он показывает, то он будет скрыт).

Fiddle

...