打开关闭移动设备上的特定 div 下拉菜单

Question

尝试创建一个带有子菜单的移动菜单，这些子菜单在单击时打开和关闭。

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

ul.sub-menu是隐藏的，并希望在单击.item-切换时打开和关闭它，并且只打开该特定的子菜单。

如何解决这个问题？

$(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>(在其下方)并显示该元素。

查看有关要实现的目标的示例：

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

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;
}

<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>

如果您需要任何其他帮助，请告诉我。