定製jquery手風琴 - 在主播上添加/刪除類

Question

我正在努力實現自定義手風琴。它確實只是一個slideToggle顯示/隱藏，但我只想要一次打開一個切換開關，使用jquery添加和刪除額外樣式的類。

下面的代碼大部分工作......扔我一個循環的部分是添加/刪除我的h4元素上的一個「活動」類。當有人點擊H4時，它應該接收「激活」類，並且我的塊中的所有其他h4元素將被「激活」移除。我已經試過了這麼多種方法，但我不能完全搞清楚。

這裏是我的HTML的例子...

<div class="accord-block"> 
     <h4 class="accordLink"><a href="#">Title of box</a></h4> 
     <div class="accord-container"> 
     <div class="accord-content"> 
      <p>Lorem ipsum content dolor sit amet desu</p> 
     </div> 
     </div> 
    </div> 

    <div class="accord-block"> 
     <h4 class="accordLink"><a href="#">Another title of another box</a></h4> 
     <div class="accord-container"> 
     <div class="accord-content"> 
      <p>Lorem ipsum content dolor sit amet desu</p> 
     </div> 
     </div> 
    </div> 

這裏是我的jQuery ...

 

    $(document).ready(function(){ 
    $(".accord-container").hide(); 
    $("h4.accordLink").click(function(){ 
     $(".accord-block").find(".active").removeClass("active"); 
     $(this).toggleClass("active").next().slideToggle("fast"); 
     $(this).parent().toggleClass("activeToggle").siblings() 
.removeClass("activeToggle").children(".accord-container").hide("fast"); 
     return false; 
     }); 
    }); 

任何見解將是非常美妙。我要走這條路，因爲我需要「協議塊」來接收一組CSS和ID，並且當我覺得這個解決方案是最好的時候，我不想使用Jquery UI。

謝謝！

編輯補充：我忘了描述我遇到的問題！使用上面的代碼，當你點擊一個h4.accordLink「打開」然後「關閉」時，jquery不會刪除「active」類。當你在協議塊之間單擊時，它的工作效果很好，但不能打開和關閉單個塊。

Answer 1

在看到更新，這裏是我的解決方案：http://jsfiddle.net/75Et5/3/

我使用index()函數來確定哪些阻止您進入，因此不要刪除活動課程，以便在關閉H4標籤時正確切換。

編輯

而且做起來的稍微更清潔的方式：http://jsfiddle.net/75Et5/4/

它利用.not($(this))而不是index()功能：

$(".accord-block").find(".active").not($(this)).removeClass("active"); 

Answer 2

有一個黑客，使用戶界面狀態殘疾手風琴容器：

$("#myaccordion").accordion({ 
autoHeight: false, 
navigation: true, 
create: function(event,ui){ 
    $("#container2").addClass("ui-state-disabled"); 
    $("#container3").addClass("ui-state-disabled"); 
    $("#container4").addClass("ui-state-disabled"); 
    $("#container5").addClass("ui-state-disabled"); 
} 
}); 

    // Hack to implement the disabling functionnality 

     var accordion = $("#myaccordion").data("myaccordion"); 
     accordion._std_clickHandler = accordion._clickHandler; 
     accordion._clickHandler = function(event, target) { 
     var clicked = $(event.currentTarget || target); 
     if (! clicked.hasClass("ui-state-disabled")) 
      this._std_clickHandler(event, target); 
     }; 

然後，在按鈕的容器直接運動添加到下一個容器（和做任何必要的驗證）。例如 - 這裏是JS的一個按鈕做驗證和打開下一個容器：

$('#NextLink1').click(function() { 
     //verify uniqueness of username before proceeding. 
     var regexVal = /^([a-zA-Z0-9]+)$/; 
     if ($('#user_username').val() == "") { 
      $('#usererrormsg').text("You must provide a user name"); 
      $('#usererrormsg').show(); 
     } else if ($('#company_name').val() == "") { 
      $('#usererrormsg').text("You must provide a company name"); 
      $('#usererrormsg').show(); 
     } else if (regexVal.test($('#user_username').val())==false) { 
      $('#usererrormsg').text("User names must be alpha-numeric only. No special characters."); 
      $('#usererrormsg').show(); 
     } else if ($("#user_user_picture").val() && $("#user_user_picture").val().match(/(.png$)|(.jpg$)|(.jpeg$)|(.gif$)/i) == null) { 
      $('#usererrormsg').text("Pictures must be png, jpg, jpeg, or gif format."); 
      $('#usererrormsg').show();  
     } else { 
     //$.get('/users/isusernameunique?un='+$('#user_username').val(),function(data) { 
      $.post('/users/isusernameunique', { 
       'un': $('#user_username').val() 
      },function(data) { 
       //$('#uniqueuserresult').html(data); 
       if(data.msg == "dupe") { 
        $('#usererrormsg').text("Someone stole your username! They must be unique. Please try again."); 
        $('#usererrormsg').show(); 
        $('#user_username').focus(); 
       } else { 
        $('#usererrormsg').hide(); 
        $("#container2").removeClass("ui-state-disabled");      
        $('#container2h3').click(); 
        $("#container1").addClass("ui-state-disabled"); 
       } 
      }, "json");   
     } 

     //$('#companydetailsh3').click(); 
     return false; 
    });