一千萬個為什麽

搜索

簡單顯示/隱藏jQuery麻煩

好吧,我覺得有點像800磅重的大猩猩試圖在jQuery上穿針。我需要一個腳本,它將在列表中執行簡單的顯示/隱藏(最好有一個很好的滑入和滑出)。

我的標記看起來像這樣:

          <div id="themes">
          

Research Themes

            
          </div><!--//end themes -->

您可以看到每個嵌套的ul都有一個“tier_2”和“hide”類。理想情況下,如果他們嵌套在li(“li.tier_1”)中,則點擊它的子項ul將刪除隱藏類並且其中包含的li將滑出,但同時應檢查所有其他ul.tier_2並確保他們得到一個隱藏類 - 所以一次只能擴展一個主題。

I set up a sandbox to try some things: http://jsbin.com/odete/3

我的JS看起來像這樣:

$(function(){

$(".tier_1 a").each(function(i,o){
  $(this).click(function(e){
    e.preventDefault();
    $(this).addClass("show").siblings("ul").removeClass("show");
    $("ul.tier_2:eq("+i+")").show().siblings("ul.tier_2").hide();
  });
});

});

我確信這完全是一種愚蠢的方式。但是我把它基於另一個腳本,它確實可以“運行一點”,就像你在沙盒中看到的那樣。

如果你們中的一個人意味著jQuery的手可能會傾向於偷看我會非常感激。如果您還可以建議如何進行過渡滑入和滑出也很棒!

最佳答案

用以下內容替換您的jQuery代碼:

$(function(){
  $(".tier_1 > a").click(function() {
    var currentList = jQuery(this).parents('li').find('.tier_2');
    $(currentList).slideToggle();
    jQuery(this).parents('ul').find('.tier_2').not(currentList).slideUp();
    return false;
  });
});​

轉載註明原文: 簡單顯示/隱藏jQuery麻煩