如何解决为什么单击标题图标时我的手风琴没有切换?
需要一些有关以下手风琴的帮助。当您单击标题时,手风琴会下降,这很棒并且效果很好。但是,当您单击 + / - 时,手风琴不会下拉。不知道如何解决这个问题,如果有人提供帮助,我们将不胜感激。不完全确定如何修改 before/after 以使其可点击。
function initacc(elem,option){
document.addEventListener('click',function (e) {
if (!e.target.matches(elem+' .a-btn')) return;
else{
if(!e.target.parentElement.classList.contains('active')){
if(option==true){
var elementList = document.querySelectorAll(elem+' .a-container');
Array.prototype.forEach.call(elementList,function (e) {
e.classList.remove('active');
});
}
e.target.parentElement.classList.add('active');
}else{
e.target.parentElement.classList.remove('active');
}
}
});
}
initacc('.accordion.v1',true);
.container {
display: flex;
flex-direction: column;
width: 100%;
max-width: 1000px;
margin: 0 auto;
padding: 10px 10px 100px 10px;
}
.container h1 {
text-align: center;
margin-bottom: 30px;
font-weight: 500;
}
.container h2 {
font-weight: 500;
}
.accordion {
display: flex;
flex-direction: column;
width: 100%;
height: auto;
}
.accordion .a-container {
display: flex;
flex-direction: column;
width: 100%;
padding-bottom: 5px;
}
.accordion .a-container .a-btn {
margin: 0;
position: relative;
padding: 15px 30px;
width: 100%;
color: #bdbdbd;
font-weight: 400;
display: block;
font-weight: 500;
background-color: #262626;
cursor: pointer;
transition: all 0.3s ease-in-out;
border-radius: 5px;
Box-shadow: 0 20px 25px -5px rgba(0,0.15),0 10px 10px -5px rgba(0,0.1) !important;
}
.accordion .a-container .a-btn span {
display: block;
position: absolute;
height: 14px;
width: 14px;
right: 20px;
top: 18px;
}
.accordion .a-container .a-btn span:after {
content: "";
width: 14px;
height: 3px;
border-radius: 2px;
background-color: #fff;
position: absolute;
top: 6px;
}
.accordion .a-container .a-btn span:before {
content: "";
width: 14px;
height: 3px;
border-radius: 2px;
background-color: #fff;
position: absolute;
top: 6px;
transform: rotate(90deg);
transition: all 0.3s ease-in-out;
}
.accordion .a-container .a-panel {
width: 100%;
color: #262626;
transition: all 0.2s ease-in-out;
opacity: 0;
height: auto;
max-height: 0;
overflow: hidden;
padding: 0px 10px;
}
.accordion .a-container.active .a-btn {
color: #fff;
}
.accordion .a-container.active .a-btn span::before {
transform: rotate(0deg);
}
.accordion .a-container.active .a-panel {
padding: 15px 10px 10px 10px;
opacity: 1;
max-height: 500px;
}
<div class="container">
<div class="accordion v1">
<div class="a-container">
<p class="a-btn">One <span></span></p>
<div class="a-panel">
<h4>Lorem ipsum dolor sit amet.</h4>
<p>Lorem ipsum dolor,sit amet consectetur adipisicing elit. Laudantium minima dolores assumenda id. Porro consequuntur at dolor eum,neque labore!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur non sint sequi ipsa laudantium,iure rem vel nemo soluta temporibus,consectetur at corrupti aspernatur maxime,iusto ne blanditiis deleniti.</p>
</div>
</div>
<div class="a-container">
<p class="a-btn">Two <span></span></p>
<div class="a-panel">
<h4>Lorem ipsum dolor sit amet.</h4>
<p>Lorem ipsum dolor,iusto ne blanditiis deleniti.</p>
</div>
</div>
</div>
</div>
解决方法
目标是您点击的内容。 + 不是您要查找的元素,因此您必须查看它是否是子元素。最简单的方法是最近的。
function initAcc(elem,option){
document.addEventListener('click',function (e) {
const clickedElem = e.target.closest(elem+' .a-btn');
if (!clickedElem) return;
else{
if(!clickedElem.parentElement.classList.contains('active')){
if(option==true){
var elementList = document.querySelectorAll(elem+' .a-container');
Array.prototype.forEach.call(elementList,function (e) {
e.classList.remove('active');
});
}
clickedElem.parentElement.classList.add('active');
}else{
clickedElem.parentElement.classList.remove('active');
}
}
});
}
initAcc('.accordion.v1',true);
.container {
display: flex;
flex-direction: column;
width: 100%;
max-width: 1000px;
margin: 0 auto;
padding: 10px 10px 100px 10px;
}
.container h1 {
text-align: center;
margin-bottom: 30px;
font-weight: 500;
}
.container h2 {
font-weight: 500;
}
.accordion {
display: flex;
flex-direction: column;
width: 100%;
height: auto;
}
.accordion .a-container {
display: flex;
flex-direction: column;
width: 100%;
padding-bottom: 5px;
}
.accordion .a-container .a-btn {
margin: 0;
position: relative;
padding: 15px 30px;
width: 100%;
color: #bdbdbd;
font-weight: 400;
display: block;
font-weight: 500;
background-color: #262626;
cursor: pointer;
transition: all 0.3s ease-in-out;
border-radius: 5px;
box-shadow: 0 20px 25px -5px rgba(0,0.15),0 10px 10px -5px rgba(0,0.1) !important;
}
.accordion .a-container .a-btn span {
display: block;
position: absolute;
height: 14px;
width: 14px;
right: 20px;
top: 18px;
}
.accordion .a-container .a-btn span:after {
content: "";
width: 14px;
height: 3px;
border-radius: 2px;
background-color: #fff;
position: absolute;
top: 6px;
}
.accordion .a-container .a-btn span:before {
content: "";
width: 14px;
height: 3px;
border-radius: 2px;
background-color: #fff;
position: absolute;
top: 6px;
transform: rotate(90deg);
transition: all 0.3s ease-in-out;
}
.accordion .a-container .a-panel {
width: 100%;
color: #262626;
transition: all 0.2s ease-in-out;
opacity: 0;
height: auto;
max-height: 0;
overflow: hidden;
padding: 0px 10px;
}
.accordion .a-container.active .a-btn {
color: #fff;
}
.accordion .a-container.active .a-btn span::before {
transform: rotate(0deg);
}
.accordion .a-container.active .a-panel {
padding: 15px 10px 10px 10px;
opacity: 1;
max-height: 500px;
}
<div class="container">
<div class="accordion v1">
<div class="a-container">
<p class="a-btn">One <span></span></p>
<div class="a-panel">
<h4>Lorem ipsum dolor sit amet.</h4>
<p>Lorem ipsum dolor,sit amet consectetur adipisicing elit. Laudantium minima dolores assumenda id. Porro consequuntur at dolor eum,neque labore!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur non sint sequi ipsa laudantium,iure rem vel nemo soluta temporibus,consectetur at corrupti aspernatur maxime,iusto ne blanditiis deleniti.</p>
</div>
</div>
<div class="a-container">
<p class="a-btn">Two <span></span></p>
<div class="a-panel">
<h4>Lorem ipsum dolor sit amet.</h4>
<p>Lorem ipsum dolor,iusto ne blanditiis deleniti.</p>
</div>
</div>
</div>
</div>
将 pointer-events:none
添加到您的 span
中会像这样:-
function initAcc(elem,function (e) {
if (!e.target.matches(elem+' .a-btn')) return;
else{
if(!e.target.parentElement.classList.contains('active')){
if(option==true){
var elementList = document.querySelectorAll(elem+' .a-container');
Array.prototype.forEach.call(elementList,function (e) {
e.classList.remove('active');
});
}
e.target.parentElement.classList.add('active');
}else{
e.target.parentElement.classList.remove('active');
}
}
});
}
initAcc('.accordion.v1',0.1) !important;
}
.accordion .a-container .a-btn span {
display: block;
position: absolute;
pointer-events:none;
height: 14px;
width: 14px;
right: 20px;
top: 18px;
}
.accordion .a-container .a-btn span:after {
content: "";
width: 14px;
height: 3px;
border-radius: 2px;
background-color: #fff;
position: absolute;
top: 6px;
}
.accordion .a-container .a-btn span:before {
content: "";
width: 14px;
height: 3px;
border-radius: 2px;
background-color: #fff;
position: absolute;
top: 6px;
transform: rotate(90deg);
transition: all 0.3s ease-in-out;
}
.accordion .a-container .a-panel {
width: 100%;
color: #262626;
transition: all 0.2s ease-in-out;
opacity: 0;
height: auto;
max-height: 0;
overflow: hidden;
padding: 0px 10px;
}
.accordion .a-container.active .a-btn {
color: #fff;
}
.accordion .a-container.active .a-btn span::before {
transform: rotate(0deg);
}
.accordion .a-container.active .a-panel {
padding: 15px 10px 10px 10px;
opacity: 1;
max-height: 500px;
}
<div class="container">
<div class="accordion v1">
<div class="a-container">
<p class="a-btn">One <span></span></p>
<div class="a-panel">
<h4>Lorem ipsum dolor sit amet.</h4>
<p>Lorem ipsum dolor,iusto ne blanditiis deleniti.</p>
</div>
</div>
</div>
</div>
说明 - 这样做是因为您的 e.target
需要与特定选择器匹配,但您的 e.target
会根据您点击的位置而有所不同,它变成了 {{1} } 当您点击 +/- 图标时。所以我阻止了那个 span
的指针事件。我也喜欢 @espascarello 的 span
方法。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。