Javascript jquery单击导航不工作

我试图让我的导航成为“活叶茶”的点击下拉菜单。它现在可以工作了，但是当我点击导航中的任何其他链接时，下拉列表仍然会出现。有人能帮我解决这个问题吗？谢谢

 <div id="ta-navcontainer">

 <div class="click-nav">
<ul id="ta-nav">
<li class="gifts"><a href="/category_s/1831.htm" title="Coming Soon"><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 href="/category_s/1849.htm"><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>
</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>

$（函数（）{
$（'.单击nav>ul'）.toggleClass（'no-js'）；
$（'.click nav.js ul'）.hide（）；
$（'.click nav.js'）。单击（函数（e）{
$（'.单击nav.js ul'）。滑动切换（200）；
//$（'.clicker'）。toggleClass（'active'）；
e、 停止传播（）；
});
$（文档）。单击（函数（）{
如果（$（'.click nav.js ul'）。是（':visible'））{
$（'.click nav.js ul'，this.slideUp（）；
$（'.clicker'）.removeClass（'active'）；
}
});
});

尝试此操作并注释您的

$（文档）。单击（函数（）{

块

$('.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();
});

---

或者你想要别的东西？

像这样简单的东西怎么样

$(function () {
    $('.click-nav .no-js').hide();

    $('.clicker').click(function() {
       ($('.no-js').toggle())

    });
});

这里有一个jfiddle示例：

，它更简单、更短、更不脆弱：

$(function () {
  var onClickLink = function( event ) {
    $li = $( event.target ).closest( 'li' );

    if ( $li.hasClass( 'loose-leaf' ) ) {
      $li.find( 'ul' ).slideToggle(200);
      return false;
    }

    $( '#ta-nav' ).slideUp();
    return true;
  };

  $( 'ul#ta-nav > li.loose-leaf > ul' ).hide();
  $( 'ul#ta-nav > li' ).on( 'click', onClickLink );
});

我还添加了一些CSS，使活页茶链接脱颖而出；我们真的应该在它旁边放一个向下箭头，并在它下面加下划线：）它看起来像这样：

cursor : pointer; color : green

---

您需要在jQuery元素声明中使用

这个

。如果您演奏小提琴，我将向您展示。这在我当前的代码中效果最好！非常感谢！：-）

cursor : pointer; color : green