jquery點擊導航不起作用

我想讓我的導航點擊下拉菜單中的「散葉茶」。它的工作方式現在，但當我點擊導航中的任何其他鏈接時，下拉菜單仍然下降。有人能幫我解決這個問題嗎？謝謝！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>

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

來源

2013-12-16 William

您需要在jQuery元素聲明中使用'this'。如果你創作一個小提琴，我會告訴你。 – Vector

試試這個，開始您$(document).click(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(); 
});

或你想要的東西另一個？

來源

2013-12-16 20:45:20 BaBL86

這對我現在的代碼來說效果最好！非常感謝！ :-) – William

這樣簡單的事情呢？

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

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

    }); 
});

這裏有一個jfiddle例如：http://jsfiddle.net/c3sQr/

來源

2013-12-16 20:50:07 MElliott

感謝這工作。 – William

This works和簡單得多，短，不易損壞：

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

來源

2013-12-16 21:17:46

jquery點擊導航不起作用

回答

相關問題