问题：
为什么我的手风琴在点击标题图标时不切换？
夹谷志
需要一些手风琴的帮助。当你点击标题，手风琴下降，这是伟大的，工作良好。但是，当你点击+/-时，手风琴不会下拉。不知道如何解决这个问题，如果有人能帮忙，我会非常感激。不完全确定如何修改前/后，所以它是可点击的。
null
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, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 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, 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>
</div>null
共有2个答案
令狐良骏
目标就是你点击的东西。+不是你要找的元素，所以你得看看它是不是子元素。最简单的方法就是最近。
null
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);css lang-css prettyprint-override">.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, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 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, 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>
</div>
曹涵润
将指针-events:none添加到span中，将对您起作用，如下所示：-
null
js lang-js prettyprint-override">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, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 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, 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, 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>
</div>
类似资料：
-
我正在尝试将react bootstrap手风琴绑定到一个传单.js标记上。当点击手风琴，标记将被放大。。。问题是我必须“双击”手风琴才能折叠它并放大标记= **codesandbox演示** https://codesandbox.io/s/react-leaflet-with-imageoverlay-add-remove-markers-dynamically-2tmex 地图容器 手风琴部
-
我尝试了以下代码，除了图标外，一切都很好。我试图在Google上找到一些解决方案，但我找不到我正在寻找的解决方案。 当我点击其中一个手风琴时，另一个手风琴应该折叠，当前点击的手风琴应该打开，同时fa图标应该根据手风琴的位置而改变。 这是我到目前为止已经尝试过的
-
手风琴效果其实就是通过JS改变元素的height，然后加上transition来让css动起来。 准备HTML结构 这里我们使用 dl ， 因为 dt 刚好可以模拟标题， dd 模拟内容。 <div class="panel"> <dl> <dt>One Item</dt> <dd>One Item Content .</dd>
-
我正在使用jQuery手风琴来隐藏一些数据。 accordion标题是一个带有一些标题的表格。有一个标题，我不希望你点击它，因为手风琴事件会触发。 所以 手风琴是可折叠的，如果您单击Test2（类nofunction），手风琴事件不应触发。但是如果您单击Test或其他表头，手风琴应该会触发事件。 我可以添加这个功能吗？ 更新测试http://jsfiddle.net/e3Q8d/，包括jQuery
-
jQueryUI中的Accordion Widget是一个基于jQuery的可扩展和可折叠内容持有者，它被分成几个部分，可能看起来像标签。 jQueryUI提供了accordion（）方法来实现这一点。 语法 (Syntax) accordion()方法可以使用两种形式 - $（selector，context）.accordion（options）方法 $(selector, context).
-
描述 (Description) 手风琴是一个图形控制元素，显示为堆叠的项目列表。 每个手风琴都可以expanded或stretched以显示与手风琴相关的内容。 可折叠布局 当您使用单个单独的可折叠元素时，您需要省略accordion-list包装元素。 以下是可折叠布局的结构 - <!-- Single collapsible element ------> <div class = "acc