从手风琴触发器复制文本单击按钮

Question

你好，我有这个简单的手风琴，我有一个问题，每当我从手风琴复制文本时，单击事件侦听器触发器并关闭手风琴。我想让它工作不使用jQuery

我该如何修复它?我该怎么做，这样当我点击。question/。answer以外的地方时，它会自动关闭?我试着添加事件监听器到窗口，但经过很长一段时间不知道如何使它工作后，我放弃了。

这是我的代码:https://codepen.io/drabfi/pen/LYrBxzWhttps://codepen.io/drabfi/pen/LYrBxzW

<div class="accordion">
<h2 class="accordion-title">Frequently asked questions</h2>
<div class="content-container active">
<div class="question">What is the return Policy</div>
<div class="answer">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt dolores non eaque beatae dolor veniam amet, molestiae neque quibusdam ipsa!</div>
</div>
<div class="content-container">
<div class="question">Where can you find us</div>
<div class="answer">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt dolores non eaque beatae dolor veniam amet, molestiae neque quibusdam ipsa!</div>
</div>
<div class="content-container">
<div class="question">Some other text</div>
<div class="answer">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt dolores non eaque beatae dolor veniam amet, molestiae neque quibusdam ipsa!</div>
</div>
</div>

const accordion = document.querySelectorAll(".content-container");
for(let i=0;i<accordion.length;i++){
accordion[i].addEventListener("click", function (){
if(this.classList.contains("active")){
accordion.forEach((panel)=>panel.classList.remove("active"));
}else{
accordion.forEach((panel)=>panel.classList.remove("active"));
this.classList.add("active");
}
})
}

.accordion{
margin: 0 auto;
width: 60%;
border-color: #fff;
padding: 2rem;
border-radius: 30px;
&-title{
margin-bottom: 2rem;
text-align: center;
}
.content-container
.question{
padding: 1rem 0;
font-size: 22px;
cursor: pointer;
border-bottom: 1px solid #000;
position: relative;
&::after{
content: "+";
position: absolute;
right: -5px;
}
}
.answer{
padding-top: 1rem;
font-size: 22px;
line-height: 1.5;
width: 100%; 
height: 0px;
overflow: hidden;
transition: all .5s;
}
}
// js styling link
.accordion .content-container.active{
.question{
&::after{
content: "-";
font-size: 2rem;
transition: .5s;
}
}
.answer{
height: 150px;
}
}

我很高兴看到解决方案，这样我就可以从这个地方继续前进。谢谢你的建议。

Answer 1

你需要学习一些关于事件委托的知识…

const
accordion   = document.querySelector('.accordion')
, accordionEl = accordion.querySelectorAll('.content-container')
;
accordion.onclick = ({target: elmAcc}) =>
{
if (!elmAcc.matches('.content-container > div.question')) return // select only this div
let elContainer = elmAcc.closest('.content-container')
if (elContainer.classList.toggle('active'))
accordionEl.forEach( panel => panel.classList.toggle('active', panel===elContainer))
}

// clicking outside will close accordion :
document.addEventListener('click', event =>
{
if (!accordion.contains(event.target)) 
accordionEl.forEach( panel => panel.classList.remove('active'))
});

.accordion {
margin        : 0 auto;
width         : 60%;
border-color  : #fff;
padding       : 2rem;
border-radius : 30px;
}
.accordion-title {
margin-bottom : 2rem;
text-align    : center;
}
.accordion .content-container .question {
padding       : 1rem 0;
font-size     : 22px;
cursor        : pointer;
border-bottom : 1px solid #000;
position      : relative;
}
.accordion .content-container .question::after {
content  : "+";
position : absolute;
right    : -5px;
}
.accordion .answer {
padding-top : 1rem;
font-size   : 22px;
line-height : 1.5;
width       : 100%;
height      : 0px;
overflow    : hidden;
transition  : all 0.5s;
}
.accordion .content-container.active .question::after {
content    : "-";
font-size  : 2rem;
transition : 0.5s;
}
.accordion .content-container.active .answer {
height : 150px;
}

<div class="accordion">
<h2 class="accordion-title">Frequently asked questions</h2>
<div class="content-container">
<div class="question">What is the return Policy</div>
<div class="answer">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt dolores non eaque beatae dolor veniam amet, molestiae neque quibusdam ipsa!</div>
</div>
<div class="content-container">
<div class="question">Where can you find us</div>
<div class="answer">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt dolores non eaque beatae dolor veniam amet, molestiae neque quibusdam ipsa!</div>
</div>
<div class="content-container">
<div class="question">Some other text</div>
<div class="answer">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt dolores non eaque beatae dolor veniam amet, molestiae neque quibusdam ipsa!</div>
</div>
</div>