JavaScript切换在控制台中无法正常工作

时间：2017-12-11 11:16:10

标签： javascript jquery

我正在尝试点击.menu-item-2891添加一个下拉菜单。添加类.active将显示菜单。现在它在点击时没有做任何事情，并且在控制台中没有显示任何错误。

＆＃13;
＆＃13; 
$(".menu-item-2891").children('.nav-top-link').click(function() {
  $(".menu-item-2891").toggleClass("active");
});
＆＃13; 
.active {
background: Red;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：1)

你走了：

$(".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>

答案 1 :(得分：0)

添加课程＆＃34;活跃＆＃34;没有让下拉出现，你只是添加＆＃34;活跃＆＃34;作为元素的一个类。您需要定义元素处于活动状态时会发生什么。

尝试为下拉选项设置默认值＆＃39; 不透明度：0; 的

当下拉列表处于活动状态时，将其更改为1.

相关问题
最新问题