程序员经验分享-hwhale

修复 Vanilla JS Accordion 以一次展开一个选项卡

2024-05-03

我有这个手风琴工作，但是，我试图弄清楚如何一次仅展开一个（单击另一个选项卡，另一个选项卡关闭）。我尝试了不同的方法来删除该类，但没有得到预期的结果。我也一直在尝试重构for循环到 ES6 标准，但这不是一个问题。

样式是 Sass，因此在 JSFiddle 中无法正确输出。

const acc = document.querySelector('#accordion');
if (acc === null) {

} else {
    let accordianHeaders = acc.querySelectorAll('header');
    let size = accordianHeaders.length;
    for (i = 0; i < size; i++) {
        accordianHeader = accordianHeaders[i];
        accordianHeader.setAttribute('class', 'toggle');
        accordianHeader.nextElementSibling.setAttribute('class', '');
        accordianHeader.onclick = function() {
            if (this.getAttribute('class') == 'toggle') {
                this.setAttribute('class', 'toggle-active');
                this.nextElementSibling.setAttribute("class", 'active');
                this.previousElementSibling.removeAttribute('class', 'active');
            } else {
                this.setAttribute('class', '');
                this.nextElementSibling.setAttribute('class', '');
            }
        }
    }
}
#accordion {
    padding-top: 25%;
    overflow: hidden;
    li {
        width: 100%;
        list-style-type: none;
    }
    header {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        overflow: hidden;
        background-color: blue;
        max-width: 500px;
        padding: 10px;
    }
    i {
        width: 10%;
        color: white;
    }
    h3 {
        margin: 0;
        width: 90%;
        color: white;
    }

    article {
        max-height: 0;
        overflow: hidden;
        max-width: 600px;
        transition: 500ms max-height ease;
        &.active {
            max-height: 1000px;
        }
    }
    .toggle-active {
        i:before {
            content: "\f106";
        }
    }
}
<ul id="accordion">
    <li>
        <header>
            <i class="fa fa-angle-down"></i>
            <h3>List 1</h3>
        </header>
        <article>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </article>
    </li>
    <li>
        <header>
            <i class="fa fa-angle-down"></i>
            <h3>List 2</h3>
        </header>
        <article>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </article>
    </li>
    <li>
        <header>
            <i class="fa fa-angle-down"></i>
            <h3>List 3</h3>
        </header>
        <article>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </article>
    </li>
</ul>

这就是你可以在香草中做到这一点的方法Js用更少的代码行

var lists = document.getElementsByTagName("header");

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

   lists[i].addEventListener("click", accordianHandler);
}

function accordianHandler(event){
  [...lists].map(o=> o.nextElementSibling.style.display = "none");

   event.target.parentNode.nextElementSibling.style.display = "block"

}

这里发生的事情是，

  1. 将点击事件附加到所有headers
  2. 在事件处理程序中，您可以为所有事件设置不显示article除您刚刚单击的标签之外的标签
  3. As article是下一个元素header， 您可以使用nextElementSibling使他们的显示切换或其他什么
var lists = document.getElementsByTagName("header");

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

   lists[i].addEventListener("click", accordianHandler);
}

function accordianHandler(event){
  [...lists].map(o=> o.nextElementSibling.style.display = "none");
  
   event.target.parentNode.nextElementSibling.style.display = "block"

}
#accordion {
		padding-top: 25%;
		overflow: hidden;
		li {
			width: 100%;
			list-style-type: none;
		}
		header {
			display: flex;
			align-items: center;
			justify-content: flex-start;
			width: 100%;
			overflow: hidden;
			background-color: blue;
			max-width: 500px;
			padding: 10px;
		}
		i {
			width: 10%;
			color: white;
		}
		h3 {
			margin: 0;
			width: 90%;
			color: white;
		}

		article {
			max-height: 0;
			overflow: hidden;
			max-width: 600px;
			transition: 500ms max-height ease;
			&.active {
				max-height: 1000px;
			}
		}
		.toggle-active {
			i:before {
				content: "\f106";
			}
		}
	}
<ul id="accordion">
   <li>
      <header>
         <i class="fa fa-angle-down"></i>
         <h3>List 1</h3>
      </header>
      <article>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </article>
   </li>
   <li>
      <header>
         <i class="fa fa-angle-down"></i>
         <h3>List 2</h3>
      </header>
      <article>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </article>
   </li>
   <li>
      <header>
         <i class="fa fa-angle-down"></i>
         <h3>List 3</h3>
      </header>
      <article>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </article>
   </li>
</ul>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

html

css

修复 Vanilla JS Accordion 以一次展开一个选项卡 的相关文章

随机推荐

热门标签