Question

我的网站上有一个手风琴正在工作但是当我点击其中一个按钮时，所有具有相同类别的元素都被赋予切换而不仅仅是下一个元素

我有以下CSS

SELECT * FROM
(
SELECT pre1 AS col FROM ccsubject
UNION
SELECT pre2 AS col FROM ccsubject
UNION
SELECT pre3 AS col FROM ccsubject
UNION
SELECT pre4 As col FROM ccsubject
UNION
SELECT pre5 AS col FROM ccsubject
UNION 
SELECT trno AS tr FROM ccsubject
) T1
WHERE col IS NOT NULL AND tr = 29005

以及我页面上的以下代码

  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");。

有什么建议吗？

Answer 1

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

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

手风琴没有将类应用于下一个元素

1 个答案: