Jquery inner UL FadeIn/FadeOut

我試圖完成一件簡單的事情。我有一個2級菜單嵌套UL。內部UL被設置爲display：none，因此只顯示主要類別。我想阻止主類別的默認onclick行爲，並將其各自的內部ULs褪色。Jquery inner UL FadeIn/FadeOut

我的HTML是這樣的：

<nav id="type-navigation"> 
    <ul id="nav_categories" class="subs"> 
     <li><a href="#">Category 1</a> 
       <ul> 
       <li><a href="#">Link1</a></li> 
       <li><a href="#">Link2</a></li> 
       <li><a href="#">Link3</a></li> 
       </ul> 
     </li> 
     <li><a href="#">Category 2</a> 
       <ul> 
       <li><a href="#">Link1</a></li> 
       <li><a href="#">Link2</a></li> 
       <li><a href="#">Link3</a></li> 
       </ul> 
     </li> 
</ul> 
</nav>

我想做到這一點使用jQuery。當我點擊第一個類別時，其子UL應與FadeIn一起顯示。當我點擊另一個類別時，先前顯示的UL應該是FadeOut，其他類別UL應該是FadeIn。

這是我的jQuery和它不按預期工作：

$("ul li a").toggle(function() { 
        $(this).children("ul").fadeIn("slow"); 
        }, 
        function() { 
       $(this).children("ul").fadeOut("slow"); 
       });

來源

2012-06-08 Milksamsa

它現在做了什麼？應該有什麼不同？ – Thomas

首先，當我點擊第一個類別鏈接時，它會轉到資源......在這個例子中，沒有鏈接，只是一個＃。事實上，上述菜單是dinamically生成的，並且所有＃實際上都是/ products/category的鏈接，也是第一級別...我必須以某種方式禁用preventDefault第一類鏈接才能轉到鏈接，但僅限於激活淡入淡出 – Milksamsa

假設你<ul>旁邊的<a>隱藏與CSS display:none：

$(".subs > li > a").click(function() { 
    $(this).parents('.subs').find('ul').hide(); 
    if($(this).next("ul").is(":visible")) { 
      $(this).next("ul").fadeOut("slow"); 
    } else { 
     $(this).next("ul").fadeIn("slow"); 
    } 
    return false; 
});

來源

2012-06-08 08:11:44 jbrtrnd

這使它工作。爲了僅僅的preventDefault第一類AI不得不也寫不出 $（「＃UL nav_categories> li>系統」）點擊（函數（事件）{\t \t \t \t \t event.preventDefault（）; \t}）。 ; – Milksamsa

嘗試this example。從例如

CSS：

nav > ul > li > ul { 
display:none; 
}

jQuery的距離例如：

$('ul#nav_categories > li > a').click(function(e) { 
    e.preventDefault(); 
    theClickedLi = $(this); 
    $('#nav_categories').find('ul').fadeOut(); 
    theClickedLi.parent('li').find('ul').fadeIn(); 
});

希望這有助於。

來源

2012-06-08 08:17:43 KiiroSora09

+ 1給你交配！ :) –

@Tats_innit謝謝兄弟。但它看起來像托馬斯的回答滿足OP。 – KiiroSora09

不用擔心，是的，你也有一個很好的答案:)有一個很好的！，歡呼！ –

Jquery inner UL FadeIn/FadeOut

回答

相關問題