我正在尝试定位我的开/关切换控制,该控制嵌入在一个链接中,当您点击它时也会切换手风琴。两种切换都有效,但我希望它们彼此独立工作。开/关开关不应切换手风琴。我正在使用Ratchet作为框架,如果这意味着什么。 Here's my JS Fiddle
<li class="table-view-cell toggle-handle accordion">
Kitchen Light
<div class="toggle">
<div class="toggle-handle"></div>
</div>
<!-- toggle -->
</li>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui, officiis asperiores totam. Amet, beatae explicabo placeat consequatur repellendus quia rerum saepe cumque autem facilis! Perferendis, exercitationem eius vitae alias ad.</p>
</div>
li.accordion {
curser: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
li.accordion.active,
button.accordion:hover {
background-color: #ddd;
}
li.accordian:after {
content: '\002B';
color: #777;
font-weight: bold;
float: right;
margin-left: 5px;
}
div.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
div.toggle {
z-index: 1;
}
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + 'px';
}
}
} //end function
答案 0 :(得分:1)
你缺少的关键部分是event.stopPropagation();因为这可以防止切换也触发手风琴。
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].getElementsByClassName("toggle")[0].onclick = function() {
event.stopPropagation();
this.classList.toggle("active");
}
acc[i].onclick = function() {
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + 'px';
}
}
} //end function
li.accordion {
/* change the button tag to li tag */
curser: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
li.accordion.active,
button.accordion:hover {
background-color: #ddd;
}
li.accordian:after {
content: '\002B';
color: #777;
font-weight: bold;
float: right;
margin-left: 5px;
}
div.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
div.toggle {
z-index: 1;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/ratchet/2.0.2/css/ratchet.css" rel="stylesheet"/>
<li class="table-view-cell toggle-handle accordion">
Kitchen Light
<div class="toggle">
<div class="toggle-handle"></div>
</div>
<!-- toggle -->
</li>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui, officiis asperiores totam. Amet, beatae explicabo placeat consequatur repellendus quia rerum saepe cumque autem facilis! Perferendis, exercitationem eius vitae alias ad.</p>
</div>
<!-- end panel -->
答案 1 :(得分:0)
我的按钮功能正常
https://jsfiddle.net/Lpppha37/5/
我更新了一些HTML代码
<li class="table-view-cell toggle-handle accordion ">
Kitchen Light
<div class="toggle toggle-handle accordion">
<div class="toggle-handle "></div>
</div>
<!-- toggle -->
</li>
答案 2 :(得分:0)
使用JavaScript处理目标元素的click事件。真的是这样的。只需使用.classList toggle方法。