多个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); 



}