javascript - Accordion 不将该类应用于下一个元素

Question

我的网站上有一个 Accordion 可以正常工作，但是当我单击其中一个按钮时，所有具有相同类的元素都会得到切换，而不仅仅是下一个元素

我有以下 CSS

  button.flxaccordion {
  background-color: rgb(255, 231, 217);
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: solid 0px;
  text-align: left;
  outline: none;
  font-size: 18px;
  transition: 0.4s;
  font-weight: 600;
}
button.flxaccordion.active,
button.flxaccordion:hover {
  background-color: rgb(233, 93, 15);
}
button.flxaccordion:after {
  content: '\25bc';
  font-size: 13px;
  color: rgb(233, 93, 15);
  float: right;
  margin-left: 5px;
}
button.flxaccordion.active:after {
  content: "\25b2";
  color: rgb(255, 231, 217);
}
.flxpanel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: 0.6s ease-in-out;
  opacity: 0;
}
.flxpanel.show {
  opacity: 1;
  max-height: 500px;
}
.flxpanel.hide {
  opacity: 0;
  height: 0;
}

以及我页面上的以下代码

<p><button class="flxaccordion">Satellite</button></p>
<div class="flxpanel">
<p>Multi disc Floor Grinders and Polishers with passive or active heads</p>
</div>
<p><button class="flxaccordion">Meteor</button></p>
<div class="flxpanel">
<p>Small Single Head Floor Grinders</p>
</div>
<p><button class="flxaccordion">GrinderTec</button></p>
<div class="flxpanel">
<p>Hand Held Floor Grinders</p>
</div>

<script type="text/javascript">// <![CDATA[
var acc = $(".flxaccordion"); //jquery flxaccordion

acc.click(function() //when we click on element
{ 
    $(this).toggleClass("active");  //it is active
    $('.flxpanel').not($(this).next()).toggleClass("show");
    });
// ]]></script>

我想我在这里混淆了一些元素，但它似乎在每个按钮之后显示了每个元素。

我需要将 toggleClass("show"); 更改为 toggleClass("hide"); 并添加另一行以使其在之后更改元素toggleClass("show"); 的事件按钮。

有什么建议吗？

Answer 1

您的 jquery 脚本需要更改如下内容:

$(document).ready(function(){
var acc = $(".flxaccordion"); //jquery flxaccordion
  acc.click(function() {
  $(this).toggleClass("active");
  $(this).parent().next().toggleClass('show');
 });
});