Question

当我点击活页或单一的茶叶时，我的下拉工作正常。但是当它们都被点击时，它们都会保持向下并相互重叠。有人可以帮助我找出一种方法，如果点击其他人，让他们重新上线？以下是我的代码。感谢!!!

<div id="topnav">
<div id="ta-navcontainer">
<div class="click-nav">
<ul id="ta-nav">
<li class="gifts"><a href="/category_s/1831.htm"><img src="http://www.teaamore.com/v/vspfiles/assets/nav-imgs/ta-gifts.png" alt="Gifts" width="26" height="32">Gifts</a>
</li>
<li class="edibles"> <a href="/category_s/1847.htm"><img src="http://www.teaamore.com/v/vspfiles/assets/nav-imgs/edibles.png" alt="Tea Ware" width="41" height="32">Edibles</a>
</li>
<li class="teaware"> <a href="/category_s/1823.htm"><img src="http://www.teaamore.com/v/vspfiles/assets/nav-imgs/ta-tea-ware.png" alt="Tea Ware" width="34" height="32">Tea Ware</a>
</li>
<li class="single-orgins"> <a class="clicker"><img src="http://www.teaamore.com/v/vspfiles/assets/nav-imgs/single-orgin-tea.png" alt="Single Origin Tea" width="32" height="32">Single Origin Tea</a>
<ul class="no-js">
        <li class="china-tea"><a href="http://www.teaamore.com/category_s/1850.htm" id="current">China</a>
        </li>
        <li class="darjeeling-tea"><a href="http://www.teaamore.com/category_s/1854.htm">Nepal</a>
        </li>
        <li class="india-tea"><a href="http://www.teaamore.com/category_s/1851.htm">India</a>
        </li>
        <li class="japan-tea"><a href="http://www.teaamore.com/category_s/1852.htm">Japan</a>
    </li>
        <li class="sri-lanka-tea"><a href="http://www.teaamore.com/category_s/1855.htm">Sri Lanka</a>
        </li>
        <li class="taiwan-tea"><a href="http://www.teaamore.com/category_s/1856.htm">Taiwan</a>
        </li>
        <li class="vietnam-tea"><a href="http://www.teaamore.com/category_s/1853.htm">Vietnam</a>
        </li>
    </ul>
</li>
<li class="loose-leaf"> <a class="clicker"><img src="http://www.teaamore.com/v/vspfiles/assets/nav-imgs/loose-leaf-tea.png" alt="Tea Ware" width="34" height="32">Loose Leaf Tea</a>
    <ul class="no-js">
        <li class="black-tea"><a href="http://www.teaamore.com/category_s/1822.htm" id="current">Black</a>
        </li>
        <li class="chai-tea"><a href="http://www.teaamore.com/category_s/1827.htm">Chai</a>
        </li>
        <li class="pu-era-tea"><a href="http://www.teaamore.com/category_s/1838.htm">Pu-erh</a>
        </li>
        <li class="oolong-tea"><a href="http://www.teaamore.com/category_s/1829.htm">Oolong</a>
        </li>
        <li class="green-tea"><a href="http://www.teaamore.com/category_s/1825.htm">Green</a>
        </li>
        <li class="white-tea"><a href="http://www.teaamore.com/category_s/1826.htm">White</a>
        </li>
        <li class="rooibos-tea"><a href="http://www.teaamore.com/category_s/1828.htm">Rooibos</a>
        </li>
        <li class="tisanes-tea"><a href="http://www.teaamore.com/category_s/1839.htm">Tisanes</a>
        </li>
        <li class="yerba-mate-tea"><a href="http://www.teaamore.com/category_s/1843.htm">Yerba Mate</a>
        </li>
        <li class="wellness-tea"><a href="http://www.teaamore.com/category_s/1845.htm">Wellness</a>
        </li>
        <li class="iced-tea"><a href="http://www.teaamore.com/category_s/1841.htm">Iced Tea</a>
        </li>
    </ul>
</li>
<li class="sachet-bag"> <a href="/category_s/1848.htm" title="Coming Soon"><img src="http://www.teaamore.com/v/vspfiles/assets/nav-imgs/tea-bag-sachet.png" alt="Sachet Tea" width="32" height="32">Sachet Tea</a>
</li>
</ul>
</div>
</div>

<script>
$(function () {
    $('.click-nav > ul').toggleClass('no-js js');
    $('.click-nav .js ul').hide();
    $('.click-nav li').click(function(e) {
    $(this).find('ul').slideToggle(200);
    e.stopPropagation();
});
});
</script>

谢谢！

Answer 1

在您打开点击的列表的同时隐藏所有其他列表：

$('.click-nav li').click(function (e) {
    $('.click-nav li').not(this).find('ul').slideUp(200);
    $(this).find('ul').slideToggle(200);
    e.stopPropagation();
});

jsFiddle

jquery单击导航，多个下拉列表不起作用

1 个答案: