javascript - jquery点击导航不起作用

标签 javascript jquery html navigation

我正在尝试使我的导航成为“散叶茶”的点击下拉菜单。它现在可以工作,但是当我单击导航中的任何其他链接时,下拉菜单仍然会下降。有人可以帮我解决这个问题吗?谢谢!

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

    <script>

 $(function () {
$('.click-nav > ul').toggleClass('no-js js');
$('.click-nav .js ul').hide();
$('.click-nav .js').click(function(e) {
    $('.click-nav .js ul').slideToggle(200);
    //$('.clicker').toggleClass('active');
    e.stopPropagation();
});
$(document).click(function() {
    if ($('.click-nav .js ul').is(':visible')) {
        $('.click-nav .js ul', this).slideUp();
        $('.clicker').removeClass('active');
    }

     });

 });

 </script>

最佳答案

尝试一下并评论您的 $(document).click(function() { block

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

或者你想要别的东西?

关于javascript - jquery点击导航不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20620392/

相关文章:

javascript - 当我提醒数组引用时,我得到的是字符而不是单词

javascript - 访问页面时自动点击页面上的 anchor 链接

jquery - 粘性标题重叠内容

javascript - 使用 jQuery 在 HTML 中选择下拉列表中的选项更改时隐藏 div

javascript - 使用 jQuery 的具有相同键和不同值的对象数组

html - 使 Bootstrap 导航栏不透明

html - 这是 CSS !important 规则的正确用例吗?

javascript - 不使用哈希更新 AJAX 请求上的 URL #

javascript - 滚动经过另一个 div 后让 div 停留在页面顶部?

javascript - 如何在 Angular JS 仪表中绘制刻度线?