当前位置: 动力学知识库 > 问答 > 编程问答 >

javascript - jquery click navigation with multiple dropdowns not working

问题描述:

When I click loose leaf or single orgins tea my drop down is working. But when they are both clicked they both stay down and overlap eachother. Can someone please help me figure out a way to have them go back up if the other is clicked? Below is my code. Thanks!!!

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

Thanks!

网友答案:

Hide all other lists at the same time you open the clicked one:

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

jsFiddle

分享给朋友:
您可能感兴趣的文章:
随机阅读: