[英]How to make accordion menu is open by default
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>
How can I edit this code to be opened by default without clicking on it when the page loaded?如何在页面加载时编辑此代码以默认打开而不单击它? Code has 1 item now but I will add more items and I want to choose which item is open when the page loaded first.
代码现在有 1 个项目,但我会添加更多项目,我想选择第一次加载页面时打开的项目。
I tried to do some changes but couldnt be successful with my poor javascript knowledge我试图做一些改变,但由于我对 javascript 的了解不足而无法成功
Just add is-open
class to the item you want it to be opened by default只需将
is-open
class 添加到您希望默认打开的项目中
<div class="accordion__item is-open">
and add this inital style for is-open
class并为
is-open
class 添加此初始样式
.is-open .accordion__body {
height: 50px; // Or whatever inital value you want
}
You just need to select the item through the NodeList generated and then assign the is-open
class to it through classList
.您只需要通过NodeList生成 select 项目,然后通过
classList
将is-open
class 分配给它。 The last change should be in CSS to select the accordion__body
of the is-open
class.最后的更改应该是 CSS 到 select
is-open
class 的accordion__body
__body。 Please check the comments to see the changes.请检查评论以查看更改。
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>
You can just call the toggle_item function once at the initialization of the code, this way it will toggle from closed to opened:您可以在代码初始化时调用一次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>
You need to call toggle_item function when index is zero in foreach loop.当 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.