定位手风琴内的切换按钮答案

【问题标题】：Targeting a toggle button within an accordion定位手风琴内的切换按钮
【发布时间】：2017-06-11 02:07:23
【问题描述】：

我正在尝试定位我的开/关切换控件，该控件嵌入在一个链接中，当您点击它时也会切换手风琴。两个切换都有效，但我希望它们彼此独立工作。开/关开关不应该切换手风琴。如果这意味着什么，我正在使用 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

【问题讨论】：

标签： javascript html css ratchet-2

【解决方案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 -->

【讨论】：

太棒了！这正是我想要它做的。谢谢！

【解决方案2】：

我有你的按钮功能

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>

【讨论】：

【解决方案3】：

使用 JavaScript 处理目标元素的点击事件。就是这样。只需使用.classList toggle 方法即可。

【讨论】：