Блог

Главная - Вопросы по программированию - toggleClass() не является функцией, но без нее accordion не работает

toggleClass() не является функцией, но без нее accordion не работает

#javascript #jquery #accordion

#javascript #jquery #аккордеон

Вопрос:

Я работаю с некоторым старым кодом для аккордеона, используя JavaScript, добавляя новые функциональные возможности. Я, наконец, добрался до того, что аккордеон открывается и закрывается по щелчку, и одновременно открывается только один. Мой вопрос заключается в следующем: есть строка кода (panel.toggleClass(«mystyle»);), которая выдает ошибку консоли о том, что это не функция, но когда я вынимаю ее, переключатель больше не работает. Я озадачен тем, почему это происходит. CSS для mystyle — 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>

Комментарии:

1. toggleClass() это метод jQuery. panel не является объектом jQuery.

2. Почему вы так часто переключаетесь между DOM и jQuery? Если вы используете jQuery, вам не нужен for цикл, вы можете использовать $(".accordion").click(function() ... ) . И тогда вы можете использовать var panel = $(this).next() и использовать методы jQuery для него.

3. Спасибо вам обоим за вашу помощь! Я унаследовал этот код со старого сайта и изо всех сил пытался понять, почему они написали код таким образом. Я воспользуюсь предложением и преобразоваю его, чтобы просто использовать jQuery, что должно решить мою проблему.