我有使用 CSS 和 JavaScript 制作 Accordion 列表的代码。当我单击标题时,它会显示隐藏的内容。我该如何做到这一点,如果我点击同一个标题,它会再次隐藏内容?任何帮助,干杯。
(function () {
var accordions, i;
// Make sure the browser supports what we are about to do.
if (!document.querySelectorAll || !document.body.classList) return;
// Using a function helps isolate each accordion from the others
function makeAccordion(accordion) {
var targets, currentTarget, i;
targets = accordion.querySelectorAll('.accordion > * >h1 ');
for(i = 0; i < targets.length; i++) {
targets[i].addEventListener('click', function () {
if (currentTarget)
currentTarget.classList.remove('expanded');
currentTarget = this.parentNode;
currentTarget.classList.add('expanded');
}, false);
}
accordion.classList.add('js');
}
// Find all the accordions to enable
accordions = document.querySelectorAll('.accordion');
// Array functions don't apply well to NodeLists
for(i = 0; i < accordions.length; i++) {
makeAccordion(accordions[i]);
}
})();
<style>
.accordion.js > * {
overflow: hidden;
}
.accordion.js > *:not(.expanded) > *:not(h1) {
max-height: 0;
margin-top: 0;
margin-bottom: 0;
opacity: 0;
visibility: hidden;
}
.accordion.js > .expanded > *:not(h1) {
max-height: 10em;
opacity: 1;
visibility: visible;
}
.accordion.js > * > h1 {
cursor: pointer;
visibility: visible;
}
.accordion.js > * > *:not(h1) {
transition: max-height 0.7s,
visibility 1s,
margin 1s,
opacity 1s;
}
.sections {
color:#5E5E5E;
text-align:center;
width:90%;
border-style:solid;
border-width:1px;
border-color:#D1D1D1;
padding: 0 .5em;
background-color:#FFFFFF;
border-radius:3px;
}
</style>
<section class="accordion">
<section class="sections">
<h1>A</h1>
<p>All content for A.</p>
</section>
<br style="line-height:5px"/>
<section class="sections">
<h1>B</h1>
<p>All content for B</p>
</section>
<br style="line-height:5px"/>
<section class="sections">
<h1>C</h1>
<p>All content for C<p>
</section>
</section>
最佳答案
这应该有效。
我所做的只是添加一个条件来检查 Accordion 类是否存在于目标父级上,如果存在则将其删除。否则其他一切都是一样的。
(function () {
var accordions, i;
// Make sure the browser supports what we are about to do.
if (!document.querySelectorAll || !document.body.classList) return;
// Using a function helps isolate each accordion from the others
function makeAccordion(accordion) {
var targets, currentTarget, i;
targets = accordion.querySelectorAll('.accordion > * >h1 ');
for(i = 0; i < targets.length; i++) {
targets[i].addEventListener('click', function (e) {
/*Added the code below*/
if (e.target.parentNode.classList.contains("expanded")) {
e.target.parentNode.classList.remove("expanded")
} else {
/*Else do the following, same as before */
if (currentTarget)
currentTarget.classList.remove('expanded');
currentTarget = this.parentNode;
currentTarget.classList.add('expanded');
}
}, false);
}
accordion.classList.add('js');
}
// Find all the accordions to enable
accordions = document.querySelectorAll('.accordion');
console.log(accordions);
// Array functions don't apply well to NodeLists
for(i = 0; i < accordions.length; i++) {
makeAccordion(accordions[i]);
}
})();
.accordion.js > * {
overflow: hidden;
}
.accordion.js > *:not(.expanded) > *:not(h1) {
max-height: 0;
margin-top: 0;
margin-bottom: 0;
opacity: 0;
visibility: hidden;
}
.accordion.js > .expanded > *:not(h1) {
max-height: 10em;
opacity: 1;
visibility: visible;
}
.accordion.js > * > h1 {
cursor: pointer;
visibility: visible;
}
.accordion.js > * > *:not(h1) {
transition: max-height 0.7s,
visibility 1s,
margin 1s,
opacity 1s;
}
.sections {
color:#5E5E5E;
text-align:center;
width:90%;
border-style:solid;
border-width:1px;
border-color:#D1D1D1;
padding: 0 .5em;
background-color:#FFFFFF;
border-radius:3px;
}
<section class="accordion">
<section class="sections">
<h1>A</h1>
<p>All content for A.</p>
</section>
<br style="line-height:5px"/>
<section class="sections">
<h1>B</h1>
<p>All content for B</p>
</section>
<br style="line-height:5px"/>
<section class="sections">
<h1>C</h1>
<p>All content for C<p>
</section>
</section>
关于JavaScript 和 CSS Accordion 列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43240201/