JavaScript 切换不起作用，控制台中没有错误

标签 javascript jquery

我试图在单击 .menu-item-2891 时添加一个下拉菜单。添加类 .active 将显示菜单。现在，它不会在单击时执行任何操作，并且在控制台中不会显示任何错误。

$(".menu-item-2891").children('.nav-top-link').click(function() {
  $(".menu-item-2891").toggleClass("active");
});
.active {
background: Red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="menu-item-2891" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-2891 has-child" aria-expanded="false"><a class="nav-top-link">MEN</a>
  <button class="toggle"><i class="icon-angle-down"></i></button>
  <ul class="children">
    <li id="menu-item-9027" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-9027"><a href="#">SHOP BY CATEGORY</a>
      <ul class="nav-sidebar-ul">
        <li id="menu-item-10798" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10798"><a href="https://squatwolf.staging.wpengine.com/product-category/men/">VIEW ALL PRODUCTS</a></li>
        <li id="menu-item-9019" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-9019"><a href="https://squatwolf.staging.wpengine.com/product-category/gym-tshirt/">T-SHIRTS</a></li>
        <li id="menu-item-9020" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-9020"><a href="https://squatwolf.staging.wpengine.com/product-category/gym-stringers-tanks/">STRINGERS &amp; TANKS</a></li>
        <li id="menu-item-9025" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-9025"><a href="https://squatwolf.staging.wpengine.com/product-category/gym-hoodies/">HOODIES</a></li>
        <li id="menu-item-9023" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-9023"><a href="https://squatwolf.staging.wpengine.com/product-category/jogger-pants/">JOGGER PANTS</a></li>
        <li id="menu-item-9024" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-9024"><a href="https://squatwolf.staging.wpengine.com/product-category/gym-shorts/">SHORTS</a></li>
        <li id="menu-item-9973" class="label-new menu-item menu-item-type-custom menu-item-object-custom menu-item-9973"><a href="https://squatwolf.staging.wpengine.com/product-category/men-gym-leggings/">MEN’S LEGGINGS / TIGHTS</a></li>
      </ul>
    </li>
    <li id="menu-item-9028" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-9028"><a href="#">SHOP BY SERIES</a>
      <ul class="nav-sidebar-ul">
        <li id="menu-item-9021" class="label-new menu-item menu-item-type-custom menu-item-object-custom menu-item-9021"><a href="https://squatwolf.staging.wpengine.com/product-category/men-new-arrivals/">NEW ARRIVALS</a></li>
        <li id="menu-item-9029" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-9029"><a href="https://squatwolf.staging.wpengine.com/product-category/series/ribbed-series/">RIBBED SERIES</a></li>
        <li id="menu-item-9035" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-9035"><a href="https://squatwolf.staging.wpengine.com/product-category/series/series-2-0/">SERIES 2.0</a></li>
        <li id="menu-item-10509" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10509"><a href="https://squatwolf.staging.wpengine.com/product-category/series/seamless/">SEAMLESS SERIES</a></li>
        <li id="menu-item-9026" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-9026"><a href="https://squatwolf.staging.wpengine.com/product-category/sale/">SALE</a></li>
      </ul>
    </li>
  </ul>
</li>

最佳答案

给你:

$(".menu-item-2891").children('.nav-top-link').click(function() {
  $(".menu-item-2891").toggleClass("active");
});
.active {
background: Red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="menu-item-2891" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-2891 has-child" aria-expanded="false"><a class="nav-top-link">MEN</a>
  <button class="toggle"><i class="icon-angle-down"></i></button>
  <ul class="children">
    <li id="menu-item-9027" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-9027"><a href="#">SHOP BY CATEGORY</a>
      <ul class="nav-sidebar-ul">
        <li id="menu-item-10798" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10798"><a href="https://squatwolf.staging.wpengine.com/product-category/men/">VIEW ALL PRODUCTS</a></li>
        <li id="menu-item-9019" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-9019"><a href="https://squatwolf.staging.wpengine.com/product-category/gym-tshirt/">T-SHIRTS</a></li>
        <li id="menu-item-9020" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-9020"><a href="https://squatwolf.staging.wpengine.com/product-category/gym-stringers-tanks/">STRINGERS &amp; TANKS</a></li>
        <li id="menu-item-9025" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-9025"><a href="https://squatwolf.staging.wpengine.com/product-category/gym-hoodies/">HOODIES</a></li>
        <li id="menu-item-9023" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-9023"><a href="https://squatwolf.staging.wpengine.com/product-category/jogger-pants/">JOGGER PANTS</a></li>
        <li id="menu-item-9024" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-9024"><a href="https://squatwolf.staging.wpengine.com/product-category/gym-shorts/">SHORTS</a></li>
        <li id="menu-item-9973" class="label-new menu-item menu-item-type-custom menu-item-object-custom menu-item-9973"><a href="https://squatwolf.staging.wpengine.com/product-category/men-gym-leggings/">MEN’S LEGGINGS / TIGHTS</a></li>
      </ul>
    </li>
    <li id="menu-item-9028" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-9028"><a href="#">SHOP BY SERIES</a>
      <ul class="nav-sidebar-ul">
        <li id="menu-item-9021" class="label-new menu-item menu-item-type-custom menu-item-object-custom menu-item-9021"><a href="https://squatwolf.staging.wpengine.com/product-category/men-new-arrivals/">NEW ARRIVALS</a></li>
        <li id="menu-item-9029" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-9029"><a href="https://squatwolf.staging.wpengine.com/product-category/series/ribbed-series/">RIBBED SERIES</a></li>
        <li id="menu-item-9035" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-9035"><a href="https://squatwolf.staging.wpengine.com/product-category/series/series-2-0/">SERIES 2.0</a></li>
        <li id="menu-item-10509" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10509"><a href="https://squatwolf.staging.wpengine.com/product-category/series/seamless/">SEAMLESS SERIES</a></li>
        <li id="menu-item-9026" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-9026"><a href="https://squatwolf.staging.wpengine.com/product-category/sale/">SALE</a></li>
      </ul>
    </li>
  </ul>
</li>

关于JavaScript 切换不起作用，控制台中没有错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47751740/

上一篇：javascript - 在同一个异步函数/定时器重置中使用多个setTimeout

下一篇：Javascript ~ SailsJs 操作未定义

相关文章：

javascript - $(window).on ('load' ) 在 jQuery(document).ready() 中没有被正确调用

javascript - sequelizejs，使用RegEx进行查询

javascript - 如何将 Balloonpanel 插件集成到我的编辑器中？

javascript - 使用分页时，只有表格第一页上的按钮是可点击的 - List.js

javascript - Javascript - 以最快、更干净的方式比较 2 个对象数组

javascript - 如何将这些 ng-init 移动到 Controller 中？

jquery - 使用 jQuery 显示 JSON 对象中的嵌套项目

javascript - 如何从父元素调用子元素

jquery - 获取用户在文本框中写入的文本，并使用 jQuery 将其显示在另一个 div 中

jquery - 如何提取 url 的一部分并填充到 img 的 src 中

©2024 IT工具网  联系我们