多個jQuery Accordions互相干擾

Question

我已經創建了一些我希望使用的水平滑動手風琴。如果我只有一把手風琴，那麼它可以很好地工作，但是如果我加入另一個，那麼它們會互相干擾。

例如單擊第一個手風琴上的一個選項卡將打開第二個手風琴的選項卡。

我需要它們以某種方式相互獨立。

這是我的js的一個片段，其餘的在jsfiddle中，如果你願意看一看。

var totalTabWidth = 0; 
function accord(){ 
$("*[accordionHeditor='true']").not('[rendered]').each(function(){ 
    activePanel = $(this).find("div.accPanel:first"); 

     $(this).find(".accPanel").each(function(){ 
      totalTabWidth += parseInt($(this).find(".blue").css("width").replace("px", "")); 
     }); 

     $(activePanel).animate({width: (parseInt($(activePanel).parent().css("width").replace("px")) - totalTabWidth).toString() + "px"}, 300); 
     $(activePanel).parent().find('.accPanel').removeClass('active'); 
     $(activePanel).addClass('active'); 

     $(this).on('click', '.accPanel', function(e){ 
      if(! $(this).is('.active')){ 
      $(activePanel).animate({width: "44px"}, 300); 
      $(this).animate({width: (parseInt($(this).parent().css("width").replace("px")) - totalTabWidth).toString() + "px"}, 300); 
      $(this).parent().find('.accPanel').removeClass('active'); 
      $(this).addClass('active'); 
      activePanel = this; 
      }; 
     }); 

     $(this).attr("rendered", "1"); 
}); 
} 

accord(); 

下面有我所有的在這個小提琴代碼的例子：

https://jsfiddle.net/rsmith93/fhwmea8c/ 

在所有的任何幫助表示讚賞

Answer 1

你需要通過ID唯一標識的手風琴。嘗試爲兩個手風琴編寫單獨的點擊事件。

下面是一個示例（我之前在我的項目中使用過）動態添加文本框並設置唯一屬性。 您可以按照相同的手風琴。

function add() { 

    j++; 
     //Create an input type dynamically. 
     var element = document.createElement("input"); 
     var element2 = document.createElement("br"); 

     //Assign different attributes to the element. 
     element.setAttribute("type", "text"); 
     element.setAttribute("id", j); 
     element.setAttribute("class", "form-control"); 
     element.setAttribute("name", j); 
     element.setAttribute("onblur", "addPreferedLocation()"); 
     element.setAttribute("placeholder", " Preference"+" "+j); 


     var foo = document.getElementById("fooBar"); 

     //Append the element in page (in span). 
     foo.appendChild(element); 
     foo.appendChild(element2); 



}