JS-Accordion, не может (display=block) все остальные элементы панели.

FreeDOM2

Привет,

У меня есть следующий код из w3schools, открывающий закрывающийся список аккордеона (панель). (CSS работает хорошо!!) Я хотел дополнить версию: когда я открываю панель, все остальные панели должны закрываться.

Я пытался использовать второй цикл в /**/, но это не сработало. Какие-либо предложения? Большое спасибо!

  


(function () {


var acc = document.getElementsByClassName("accordion");


var i,j;


for (i = 0; i < acc.length; i++) {


acc[i].addEventListener("click", function() {


/* for (j = 0; j < acc.length; j++) {


acc[i].nextElementSibling.style.display = "block";


}


*/


this.classList.toggle("active");


var panel = this.nextElementSibling;


if (panel.style.display === "block") {


panel.style.display = "none";


} else {


panel.style.display = "block";


}


});


}


})();

Код (JavaScript):

Алексей Стоянов

Предполагая, что вы не хотите, чтобы он был анимирован, это больше НЕ работа JavaScript.

На входах есть атрибут :checked, который вы можете использовать для запуска аккордеонов.

Если вы хотите открыть только один, используйте type="radio" с тем же именем.

 


.accordionMenu .toggle {


/* fix for IE so <label> will still toggle their "for" */


display:block;


position:absolute;


left:-999em;


}


.accordionMenu .toggle ~ label {


/*


WHY isn't this the default for <label>?!? Oh that's right, nobody


***ing knows what LABEL is even for much less how to use it right.


*/


cursor:pointer;


}


.accordionMenu .toggle:checked ~ label {


/*


set the style you want for it when checked here. You could use


generated content to add/remove a character like the right-pointing


utf-8 triangles.


*/


background:#000;


color:#FFF;


}


.accordionMenu .toggle ~ ul {


/* APo insstead of display:none so search doens't think we're content cloaking */


position:absolute;


left:-999em;


top:-999em;


}


.accordionMenu .toggle:checked ~ ul {


position:static; /* will now ignore the top/left values, showing it. */


}

Код (разметка):

 <ul class="accordionMenu"> <li> <input type="radio" name="menuDepth1" id="toggle_section1" class="toggle" hidden> <label for="toggle_section1">Section 1</label> <ul> <li>Test1-1</li> <li>Test1-2</li> <li>Test1-3</li> <li>Test1-4</li> <li>Test1-5</li> <li>Test1-6</li> </ul> </li><li> <input type="radio" name="menuDepth1" id="toggle_section2" class="toggle" hidden> <label for="toggle_section2">Section 2</label> <ul> <li>Test2-1</li> <li>Test2-2</li> <li>Test2-3</li> <li>Test2-4</li> <li>Test2-5</li> <li>Test2-6</li> </ul> </li><li> <input type="radio" name="menuDepth1" id="toggle_section3" class="toggle" hidden> <label for="toggle_section3">Section 3</label> <ul> <li>Test3-1</li> <li>Test3-2</li> <li>Test3-3</li> <li>Test3-4</li> <li>Test3-5</li> <li>Test3-6</li> </ul> </li> </ul>

Код (разметка): БОЛЬШЕ НЕ РАБОТАЕТ ПО JAVASCRIPT!!! Также помните, что если вам не нужно «только одно открытие», есть теги DETAILS и SUMMARY, которые также могут сделать это без JavaScript - и, что еще интереснее, можно сделать это и без помощи CSS.

Йохан Грицкевич

Здесь есть решение: https://stackoverflow.com/questions/36643811/css-toggle-accordion-panel

Похожие темы	Дата
Базовый JavaScript	19.10.2024, 18:10
[Специалист] JavaScript. Уровень 3. React и JSX (2017)	19.10.2024, 18:10
360° Panoramic Image Viewer - Responsive Jquery Plugin	19.10.2024, 18:10
Angulr V2.0.1 – Шаблон Администратора Angularjs, Bootstrap	19.10.2024, 18:10
[А. Никольский] JavaScript на примерах. Практика, практик	19.10.2024, 18:10
Javascript И Jquery. Исчерпывающее Руководство (3-е Издание)	19.10.2024, 18:10
[Lectrum] Введение в веб-разработку: JavaScript, c глубоким разбором тем	19.10.2024, 18:10
JavaScripting with Duktape for Delphi by Erik van Bilsen	19.10.2024, 18:10
Включение одинарных кавычек во встроенный JavaScript	19.10.2024, 18:10
Строки таблицы переключаются с подкатегориями	19.10.2024, 18:10

JS-Accordion, не может (display=block) все остальные элементы панели.

FreeDOM2

Алексей Стоянов

Йохан Грицкевич

I AM

Интересно