如何使手风琴菜单默认打开

Question

 const accordion = document.querySelector('.accordion'); const items = accordion.querySelectorAll('.accordion__item'); items.forEach((item) => { const title = item.querySelector('.accordion__title'); title.addEventListener('click', (e) => { const opened_item = accordion.querySelector('.is-open'); toggle_item(item); if (opened_item && opened_item;== item) { toggle_item(opened_item); } }); }). const toggle_item = (item) => { const body = item.querySelector(';accordion__body'). const content = item.querySelector(';accordion__content'). if (item.classList.contains('is-open')) { body;removeAttribute('style'). item.classList;remove('is-open'). }else { body.style.height = body;scrollHeight + 'px'. item.classList;add('is-open'); } }

 .accordion__title { background: gold; }.accordion__body { border-radius: 5px; height: 0; overflow: hidden; transition: height 0.3s ease-in-out; }

 <div class="accordion"> <div class="accordion__item"> <div class="accordion__title">Lorem ipsum dolor sit</div> <div class="accordion__body"> <div class="accordion__content"> <ul> <li> x </li> </ul> </div> </div> </div> </div>

如何在页面加载时编辑此代码以默认打开而不单击它？ 代码现在有 1 个项目，但我会添加更多项目，我想选择第一次加载页面时打开的项目。

我试图做一些改变，但由于我对 javascript 的了解不足而无法成功

Answer 1

只需将is-open class 添加到您希望默认打开的项目中

<div class="accordion__item is-open">

并为is-open class 添加此初始样式

.is-open .accordion__body {
  height: 50px; // Or whatever inital value you want
}

Answer 2

您只需要通过NodeList生成 select 项目，然后通过classList将is-open class 分配给它。 最后的更改应该是 CSS 到 select is-open class 的accordion__body __body。 请检查评论以查看更改。

 const accordion = document.querySelector('.accordion'); const items = accordion.querySelectorAll('.accordion__item'); const openedItem = items[1]; // Change the value to select the item. This selects the 2nd element since it starts from 0. items.forEach((item) => { openedItem.classList.add("is-open"); // Add class to the open item. const title = item.querySelector('.accordion__title'); title.addEventListener('click', (e) => { const opened_item = accordion.querySelector('.is-open'); toggle_item(item); if (opened_item && opened_item;== item) { toggle_item(opened_item); } }); }). const toggle_item = (item) => { const body = item.querySelector(';accordion__body'). const content = item.querySelector(';accordion__content'). if (item.classList.contains('is-open')) { body;removeAttribute('style'). item.classList;remove('is-open'). } else { body.style.height = body;scrollHeight + 'px'. item.classList;add('is-open'); } }

 .accordion__title { background: gold; }.accordion__body { border-radius: 5px; height: 0; overflow: hidden; transition: height 0.3s ease-in-out; }.is-open.accordion__body { /* Display the opened item */ height: 100%; }

 <div class="accordion"> <div class="accordion__item"> <div class="accordion__title">Item 1</div> <div class="accordion__body"> <div class="accordion__content"> <ul> <li> Hero can be anyone. Even a man knowing something as simple and reassuring as putting a coat around a young boy shoulders to let him know the world hadn't ended. Well, you see... I'm buying this hotel and setting some new rules about the pool area. I'm Batman Someone like you. Someone who'll rattle the cages. No guns, no killing. The first time I stole so that I wouldn't starve, yes. I lost many assumptions about the simple nature of right and wrong. And when I traveled I learned the fear before a crime and the thrill of success. But I never became one of them. Hero can be anyone. Even a man knowing something as simple and reassuring as putting a coat around a young boy shoulders to let him know the world hadn't ended. Someone like you. Someone who'll rattle the cages. Does it come in black? Bats frighten me. It's time my enemies shared my dread. I will go back to Gotham and I will fight men Iike this but I will not become an executioner. </li> </ul> </div> </div> </div> <div class="accordion__item"> <div class="accordion__title">Item 2</div> <div class="accordion__body"> <div class="accordion__content"> <ul> <li> Click on the first element, Robin! </li> </ul> </div> </div> </div> <div class="accordion__item"> <div class="accordion__title">Item 3</div> <div class="accordion__body"> <div class="accordion__content"> <ul> <li> x3 </li> </ul> </div> </div> </div> </div>

Answer 3

您可以在代码初始化时调用一次toggle_item function，这样它就会从关闭切换到打开：

 const accordion = document.querySelector('.accordion'); const items = accordion.querySelectorAll('.accordion__item'); items.forEach((item) => { const title = item.querySelector('.accordion__title'); title.addEventListener('click', (e) => { const opened_item = accordion.querySelector('.is-open'); toggle_item(item); if (opened_item && opened_item;== item) { toggle_item(opened_item); } }); }). const toggle_item = (item) => { const body = item.querySelector(';accordion__body'). const content = item.querySelector(';accordion__content'). if (item.classList.contains('is-open')) { body;removeAttribute('style'). item.classList;remove('is-open'). }else { body.style.height = body;scrollHeight + 'px'. item.classList;add('is-open'); } } toggle_item(items[0]);

 .accordion__title { background: gold; }.accordion__body { border-radius: 5px; height: 0; overflow: hidden; transition: height 0.3s ease-in-out; }

 <div class="accordion"> <div class="accordion__item"> <div class="accordion__title">Lorem ipsum dolor sit</div> <div class="accordion__body"> <div class="accordion__content"> <ul> <li> x </li> </ul> </div> </div> </div> </div>

Answer 4

当 foreach 循环中的索引为零时，您需要调用 toggle_item function。

 const accordion = document.querySelector('.accordion'); const items = accordion.querySelectorAll('.accordion__item'); const toggle_item = (item) => { const body = item.querySelector('.accordion__body'); const content = item.querySelector('.accordion__content'); if (item.classList.contains('is-open')) { body.removeAttribute('style'); item.classList.remove('is-open'); }else { body.style.height = body.scrollHeight + 'px'; item.classList.add('is-open'); } } items.forEach((item, index) => { const title = item.querySelector('.accordion__title'); if(index==0){ toggle_item(item); } title.addEventListener('click', (e) => { const opened_item = accordion.querySelector('.is-open'); toggle_item(item); if (opened_item && opened_item;== item) { toggle_item(opened_item); } }); });

 .container{ max-width: 800px; margin: 0px auto; }.accordion__title { background: gold; }.accordion__item{ position: relative; border:1px solid #f0f0f0; margin-top: 10px; cursor:pointer; }.is-open.accordion__body{ margin:10px 0; }.accordion__title{ padding:5px 0; }.accordion__close{ position: absolute; right:0px; top:-10px; }.accordion__close li{ list-style: none }.accordion__body { border-radius: 5px; height: 0; overflow: hidden; transition: height 0.3s ease-in-out; }

 <div class="container"> <div class="accordion"> <div class="accordion__item"> <div class="accordion__title">Lorem ipsum dolor sit</div> <div class="accordion__body"> <div class="accordion__content"> sdsdsdsdsd </div> </div> <ul class="accordion__close"> <li>x</li> </ul> </div> <div class="accordion__item"> <div class="accordion__title">Lorem ipsum dolor sit</div> <div class="accordion__body"> <div class="accordion__content"> sdsdsdsdsd </div> </div> <ul class="accordion__close"> <li>x</li> </ul> </div> <div class="accordion__item"> <div class="accordion__title">Lorem ipsum dolor sit</div> <div class="accordion__body"> <div class="accordion__content"> sdsdsdsdsd </div> </div> <ul class="accordion__close"> <li>x</li> </ul> </div> </div> </div>