Question

尝试创建一个带有子菜单的移动菜单，点击后可以打开和关闭。

目前触发器打开并关闭所有隐藏的子菜单，而不仅仅是与父链接相关的特定子菜单。

ul.sub-menu被隐藏，想要在点击.item-toggle时打开和关闭它，只打开那个特定的子菜单。

如何解决这个问题？

$(document).ready(function() {
 $("ul.sub-menu").hide();
 $(".icon-toggle").click (function(){
 $("ul.sub-menu").toggle();
 });
});

    <ul class="sub-menu">
            <li id="menu-item-1788" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-1788">
            <a href="http://vapour-shack.com/cat/e-cigarettes/e-cigarette-starter-kit/">E-Cigarette Starter Kits</a>
           </li>
            <li id="menu-item-1740" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-1740">
            <a href="http://vapour-shack.com/cat/e-cigarettes/e-cigarette-advanced-kits/">E-Cigarette Advanced Kits</a>
           </li>
      </ul>
    </li>
<li id="menu-item-804" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-804"><a href="http://vapour-shack.com/cat/mods/">Mods <i class="icon-toggle"></i></a></li>
<li id="menu-item-799" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children menu-item-799"><a href="http://vapour-shack.com/cat/e-liquids/">E-Liquids <i class="icon-toggle"></i></a>
<ul class="sub-menu">
    <li id="menu-item-1733" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-1733"><a href="http://vapour-shack.com/cat/e-liquids/cloudy-reef/">Cloudy Reef</a></li>
    <li id="menu-item-1735" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-1735"><a href="http://vapour-shack.com/cat/e-liquids/vaper-crew/">Vaper Crew</a></li>
    <li id="menu-item-1734" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-1734"><a href="http://vapour-shack.com/cat/e-liquids/tempest-premium/">Tempest Premium</a></li>
    <li id="menu-item-841" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-841"><a href="http://vapour-shack.com/cat/e-liquids/aniseed/">Aniseed</a></li>
    <li id="menu-item-842" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-842"><a href="http://vapour-shack.com/cat/e-liquids/desert/">Dessert</a></li>
    <li id="menu-item-843" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-843"><a href="http://vapour-shack.com/cat/e-liquids/sweets/">Sweets</a></li>
    <li id="menu-item-844" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-844"><a href="http://vapour-shack.com/cat/e-liquids/vanilla/">Vanilla</a></li>
    <li id="menu-item-845" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-845"><a href="http://vapour-shack.com/cat/e-liquids/tobacco/">Tobacco</a></li>
    <li id="menu-item-846" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-846"><a href="http://vapour-shack.com/cat/e-liquids/fruit/">Fruit</a></li>
    <li id="menu-item-847" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-847"><a href="http://vapour-shack.com/cat/e-liquids/mint/">Mint / Icy</a></li>
</ul>
</li>
<li id="menu-item-800" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children menu-item-800"><a href="http://vapour-shack.com/cat/tanksclearomizers/">Tanks &amp; Clearomizers <i class="icon-toggle"></i></a>

https://jsfiddle.net/7akc5f7y/10/

Answer 1

理解您的代码非常困难，因此我创建了一个新环境来解释如何实现您想要实现的目标。

使用jQuery中的.next()方法，您可以选择符合所定义参数的下一个元素，因此当您点击网站上的某个类别时，它应找到下一个<ul>（在它下面））并显示。

查看您想要实现的目标示例：

＆＃13;

$('.cat').click(function(){
	$(this).next('.sub').toggle();
});

＆＃13;

ul {
  padding: 0;
  list-style-type: none;
}

li {
  width: 300px;
  height: 35px;
}

.cat {
  background: red;
  margin-top: 20px;
}

.sub {
  display: none;
}

.sub li {
  background: blue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul>
  <li class="cat">Category</li>
  <ul class="sub">
    <li>Item in category</li>
    <li>Item in category</li>
    <li>Item in category</li>
  </ul>
  
  <li class="cat">Category</li>
  <ul class="sub">
    <li>Item in category</li>
    <li>Item in category</li>
    <li>Item in category</li>
  </ul>
</ul>

＆＃13;

如果您需要任何其他帮助，请与我们联系。

在移动下拉菜单上打开关闭特定Div

1 个答案: