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):

Stotheguatt

Предполагая, что вы не хотите, чтобы он был анимирован, это больше НЕ работа 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.

HobertHanlkeh2

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

Похожие темы	Дата
Lunar V1.0 - Jquery Фотография	19.12.2024, 05:12
[lynda.com] - Javascript	19.12.2024, 05:12
[WebForMySelf] JavaScript. Полное руководство для современной веб-разработки (2019)	19.12.2024, 05:12
Современный учебник javascript	19.12.2024, 05:12
MsAgent JavaScript Editor скачать	19.12.2024, 05:12
Запрос комментариев: дорожная карта для платформы seductiveapps.	19.12.2024, 05:12
Как разместить на Картах Google 3 маркера с пользовательским вводом вместо 1?	19.12.2024, 05:12
как зациклить несколько изображений на одной странице/публикации	19.12.2024, 05:12
Как выбрать из списка только один объект, содержащий данные, и игнорировать остальные	19.12.2024, 05:12
(Свежак) Разработка enterprise Angular.JS приложения	19.12.2024, 05:12

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

FreeDOM2

Stotheguatt

HobertHanlkeh2

I AM

Интересно