toggleClass不是函数,但是没有它,手风琴将无法工作

问题描述

我正在使用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 (将#修改为@)