.toggleclass / .addclass не работает - активировать раскрывающийся список, добавив класс "open"

Question

в моем интернет-магазине. Я хочу активировать раскрывающееся меню корзины при добавлении товара в корзину.Я пробовал это через .toggleClass и .addClass.

Это мой сценарий:

jQuery(document).ready(function( $ ){
 $(".add_to_cart_button").click(function(){
  $("header-icon.animate-dropdown.dropdown").toggleClass("open");
  }); 
});

К сожалению, это не работает.

Это мой HTML-код раскрывающегося спискаменю (когда оно свернуто):

<div class="header-icon animate-dropdown dropdown"> <a href="127.0.0.1/cart/" data-toggle="dropdown" aria-expanded="false">
 <i class="ec ec-shopping-bag"></i> 
 <span class="cart-items-count count header-icon-counter">0</span>
 <span class="cart-items-total-price total-price">
 <span class="woocommerce-Price-amount amount">
 <span class="woocommerce-Price-currencySymbol">€</span>0,00</span></span> 
 </a><ul class="dropdown-menu dropdown-menu-mini-cart"><li><div     class="widget_shopping_cart_content">

Это HTML-код, когда выпадающее меню активно:

 <div class="header-icon animate-dropdown dropdown open"> <a href="127.0.0.1/cart/" data-toggle="dropdown" aria-expanded="true">
 <i class="ec ec-shopping-bag"></i> 
 <span class="cart-items-count count header-icon-counter">0</span> 
 <span class="cart-items-total-price total-price">
 <span class="woocommerce-Price-amount amount">
 <span class="woocommerce-Price-currencySymbol">€</span>0,00</span></span>      </a>
 <ul class="dropdown-menu dropdown-menu-mini-cart">
 <li><div class="widget_shopping_cart_content">

Я пробовал тестировать через консоль Chrome только с использованием .toggleClass («открыть»), то выпадающий список был активирован.Но код вместе не работает.

Может кто-нибудь объяснить мне, почему скрипт не работает?

Answer 1

Хорошо, давайте сделаем это:)
В корне вашей темы того же уровня, что и style.css, если папка js отсутствует, создайте ее.
Внутри этой папки js создайте пустой файл и назовите его my-js-file.js.
ПОТОМ, в файл functions.php добавьте следующее:

/**
 * Enqueue my scripts.
 */
function my_scripts() {

    wp_enqueue_script( 'my-js-file', get_theme_file_uri( '/js/my-js-file.js' ), array( 'jquery' ), filemtime( get_theme_file_path( '/js/my-js-file.js' ) ), true );

}
add_action( 'wp_enqueue_scripts', 'my_scripts' );

НАКОНЕЦ, в новом созданном файле my-js-file.js добавить:

(function ($) {

    $(".add_to_cart_button").click(function(){
        $("header-icon.animate-dropdown.dropdown").toggleClass("open");
    }); 

})(jQuery);

Это должно работать как положено, если только вы не нацелены на неправильный элемент.
Здесь целевым элементом является $(".add_to_cart_button").

Надеюсь, это поможет:)

Answer 2

Попробуйте это:

jQuery(document).ready(function( $ ){
  $(".add_to_cart_button").click(function(){
    var dropDown = $("header-icon.animate-dropdown.dropdown");
    // if the droppable does not have class 'open' then add it
    if (!dropDown.hasClass('open')) {
      dropDown.addClass('open');
    }
    // if it does have class 'open' then we close it ( preferable )
    else {
      dropDown.removeClass('open');
    }
  }); 
});