Question

我已经创作了一些我希望使用的水平滑动手风琴。如果我只有一部手风琴那么它可以完美地工作，但是如果我加入第二部手风琴那么它们会相互干扰。

e.g。单击第一个手风琴上的一个标签将打开第二个手风琴上的标签。

我需要他们以某种方式彼此独立。

这是我的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);



}

多个jQuery Accordions相互干扰

1 个答案: