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

如何解决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>