问题描述
我正在使用JavaScript添加新功能来处理手风琴的一些旧代码。我终于到达了手风琴在单击时打开和关闭的位置,一次只能打开一个。我的问题是:有一行代码(panel.toggleClass(“ mystyle”);)抛出控制台错误,提示它不是函数,但是当我将其取出时,切换开关不再起作用。我对为什么会这样感到困惑。 mystyle的CSS为display:none;。
<button role="button" aria-expanded="false" aria-controls="answer<?PHP echo $i; ?>" class="accordion">
<h2>Websites</h2><i role="presentation" style="float:right; margin:15px;" class="rt-icon icon-plus-circled"></i>
<h3>heading</h3>
<p>Blurb Goes Here</p>
</button>
<div id="answer" class="panel">
<div>
<h3>Answer</h3>
<p>Answer Text</p>
</div>
</div>
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click",function() {
//toggle i class for plus to minus on click
jQuery("i",this).toggleClass("icon-plus-circled icon-minus-circled-1 ");
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
// need both to make toggle function
panel.style.maxHeight = null;
panel.toggleClass("mystyle");
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
// Loop over all the panels an close each one
document.querySelectorAll(".panel").forEach(function(panel){
panel.style.maxHeight = null;
});
}
var x = this.getAttribute("aria-expanded");
if (x === "true") {
x = "false";
panel.style.maxHeight = null;
} else {
x = "true";
panel.style.maxHeight = panel.scrollHeight + "px";
}
this.setAttribute("aria-expanded",x);
panel.style.maxHeight = panel.scrollHeight + "px";
});
}
</script>
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)