Как настроить пользовательскую вкладку jQuery для работы правильно

Question

Я пытаюсь разработать систему вкладок для использования в моем веб-приложении. Я понимаю основы использования вкладок, и раньше мне приходилось работать с рабочими вкладками.

На этот раз, однако, мне нужно, чтобы он работал немного менее условно. Начнем с того, что все содержимое вкладки скрыто. Когда я нажимаю на вкладку, я хочу, чтобы содержимое вкладки скользило вниз. Затем, если я снова нажму на одну и ту же вкладку, я хочу, чтобы она задвигалась (таким образом, все снова скрывалось). Однако, если я нажимаю на другую вкладку, я хочу погладить содержимое для этой вкладки.

Это общий вид его:

Вот мой 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 с настройкой, чтобы сделать все из них разборным, но не более одной расширяемой в любое время.

Answer 1

Я уже строил нечто подобное. Вы хотите использовать методы jQuery .slideUp() и .slideDown().

EDIT:

Попробуйте это (снова). (Я сделал пару небольших изменений Это было определенно сломан раньше..)

$(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; 
    }); 
}); 

Answer 2

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

Answer 3

я успешно нашел ответ с этим JavaScript:

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

Here является скрипкой.