讓自定義的jQuery選項卡系統正常工作

我正在嘗試開發一個選項卡系統，以便在我的web應用程序中使用。我理解使用標籤的基本原理，並設法在之前獲得工作標籤系統。讓自定義的jQuery選項卡系統正常工作

然而這一次，我需要它的傳統工作稍微少一些。首先，所有標籤內容都是隱藏的。當我點擊一個標籤時，我希望標籤的內容向下滑動。然後，如果我再次單擊相同的選項卡，我希望它向後滑動（從而再次隱藏所有內容）。如果我點擊不同的標籤，我想淡入該標籤的內容。

這是它的整體外觀：

The appearance of the user interface.

這裏是我的標籤HTML：

<div class="controls"> 
    <ol class="sections"> 
     <li><a href="#touch"><img src="assets/img/touch.png" alt="Touch"> Touch</a></li> 
     <li><a href="#speak"><img src="assets/img/speak.png" alt="Speak"> Speak</a></li> 
    </ol> 
    <ol class="actions" id="touch"> 
     <li><a href="#">Search for what hatched</a></li> 
     <li><a href="#">Pick up the eggshell</a></li> 
    </ol> 
    <ol class="actions" id="speak"> 
     <li><a href="#">Call for what hatched</a></li> 
     <li><a href="#">Pick up the eggshell</a></li> 
    </ol> 
</div>

的HTML是奠定了這樣的造型的原因，所以我如果可能，d寧可不改變。「部分」有序列表用於標籤，每個「操作」是該標籤的標籤內容。

這是我的JavaScript（不工作）：

$(document).ready(function(){ 
    $(".sections > li > a").click(function(){ 
     $("ol.actions").hide(); 
     if($(this).parent().hasClass("active")) { 
      $($(this).attr('href')).hide(); 
      $(this).parent().removeClass("active"); 
     } else { 
      $($(this).attr('href')).show(); 
      $(this).parent().addClass("active"); 
     } 
     return false; 
    }); 
});

我也試過這樣：

$(document).ready(function(){ 
    $(".sections li a").click(function(){ 
     var target = $(this).attr('href'); 
     var parent = $(this).parent(); 

     var sections = $("ol.sections li"); 
     var actions = $("ol.actions"); 

     $(sections).removeClass("active"); 
     $(actions).slideUp(); 

     $(parent).addClass("active"); 
     $(target).slideDown(); 

     return false; 
    }); 
});

誰能幫我找出這個正確的代碼？類似系統的一個例子是jQuery UI中的手風琴菜單，其設置使得它們都可以摺疊，但在任何時候都不能展開。

來源

2013-07-28 Forest

我以前做過類似的東西。您想要使用.slideUp()和.slideDown() jQuery方法。

編輯：

試試這個（再次）。（我做了一些略微的修改，這是絕對的前打破。）

$(document).ready(function(){ 
    $(".sections li a").click(function(){ 
     var target = $(this).attr('href'); 
     var $parent = $(this).parent(); 

     var $sections = $("ol.sections li"); 
     var $actions = $("ol.actions"); 

     if(!$parent.hasClass('active')){ 
      $sections.removeClass("active"); 
      $actions.slideUp(); 

      $parent.addClass("active"); 
      $(target).slideDown(); 
     } else { 
      $sections.removeClass("active"); 
      $actions.slideUp(); 
     } 

     return false; 
    }); 
});

來源

2013-07-28 13:12:58

哦，我忘了提及我以前曾嘗試過。問題是每個人都不能再正常關閉。 – Forest

由於沒有正確關閉，你的意思是它沒有動畫？我會懷疑你的'active'類是個問題。 –

好吧，一切正常，但一旦我點擊當前標籤再次將其最小化，它會滑動 - 但立即反彈回來。 – Forest

$(document).ready(function(){ 

$("#touch").hide(); 
$("#speak").hide(); 

$(".sections > li > a").click(function(){ 
    var id=$(this).attr("href"); 
    $(".actions:visible").not(id).slideUp(); 
    if($(id).is(":visible")) {  
     $(id).slideUp();} 
    else 
    {$(id).slideDown(); } 

}); 
});

http://jsfiddle.net/LY7rR/3/

來源

2013-07-28 13:59:34 rps

我成功地找到了這個JavaScript答案：

$('#t1').click(function(){ 
    $('#touch').slideToggle('slow'); 
}); 
$('#t2').click(function(){ 
    $('#speak').slideToggle('slow'); 
});

Here是小提琴。

來源

2013-07-28 14:38:08

讓自定義的jQuery選項卡系統正常工作

回答

相關問題