时间戳

首页 > 解决方案 > .toggleclass / .addclass 不起作用 - 通过添加类“open”来激活下拉菜单

jquery - .toggleclass / .addclass 不起作用 - 通过添加类“open”来激活下拉菜单

问题描述

在我的网上商店中，我想在将产品添加到购物车时激活购物车下拉菜单。我通过 .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">€&lt;/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">€&lt;/span>0,00</span></span>      </a>
 <ul class="dropdown-menu dropdown-menu-mini-cart">
 <li><div class="widget_shopping_cart_content">

我仅使用 .toggleClass("open") 尝试通过 Chrome 控制台进行测试，然后下拉菜单被激活。但是代码一起不起作用。

有人可以向我解释为什么脚本不起作用吗？

标签： jquerywordpress

解决方案

好的，让我们这样做:)
在主题的根目录，与 相同的级别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").

希望这可以帮助 ：）

推荐阅读