jQuery顯示子菜單是否已單擊父級

Question

有人可以幫助代碼。

我想僅在單擊子菜單父項時顯示子菜單。

HTML

<ul>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a>
    <ul class="sub-menu">
        <li><a href="#">Submenu</a></li>
        <li><a href="#">Submenu</a></li>
    </ul>
</li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a>
    <ul class="sub-menu">
        <li><a href="#">Submenu</a></li>
        <li><a href="#">Submenu</a></li>
    </ul>
</li>
<li><a href="#">Item</a></li>
</ul>

因此，如果您單擊父子菜單將顯示。

這里是小提琴鏈接 - http://jsfiddle.net/KhNCV/1/

Answer 1

$('.sub-menu').hide();

$("li:has(ul)").click(function(){

$("ul",this).slideDown();
});

http://jsfiddle.net/3nigma/KhNCV/2/

要么

$('.sub-menu').hide();

$("li:has(ul)").click(function(){

$("ul",this).toggle('slow');
});

http://jsfiddle.net/3nigma/KhNCV/4/

Answer 2

$('.sub-menu').hide();

$("a").click(function(){

    $(this).parent().children("ul").toggle();

})

看看這個鏈接http://jsfiddle.net/KhNCV/6/

Answer 3

這是你工作的例子 。 目前還不清楚你為什么需要a標簽，因為你可以在CSS中使用cursor：pointer來使li看起來像是可點擊的。 我會假設你想在IE瀏覽器上做一些漂亮的徘徊，那只是CSS嗎？ 如果沒有，您可以通過刪除它們來簡化。

而不是在.submenu上做hide（），你應該使用CSS（用DOM而不是onReady / load解析）。

.sub-menu { display: none; }

接下來是切換菜單的代碼：

$('ul li a').click(function() {
    $(this).parent().find('ul.sub-menu').toggle();
    return false;
});

Answer 4

$('li a').click(
function() {
    $(this).next().slideToggle();
})

Answer 5

嘗試這個

$(function(){

   //Hide all the sub menus
   $('.sub-menu').hide();

   $("li:has(ul)").click(function(){
      //Find the child ul and slideToggle
      $(this).children("ul").slideToggle();
   });
});