以折叠方式折叠动态添加的制表符

Question

下面是一个示例。

$(function() { 
 
     var icons = { 
 
      header: "ui-icon-circle-arrow-e", 
 
      headerSelected: "ui-icon-circle-arrow-s" 
 
     }; 
 
     $("#accordion").accordion({ 
 
      icons: icons, 
 
      collapsible: true 
 
     }); 
 
     $("#header1").click(function(e) { return false; 
 
      $("#accordion").accordion("option", "icons", false); 
 
     }); 
 
}); 
 

 
$('#accordion .accClicked') 
 
     .off('click') 
 
    .click(function(){ 
 
     $(this).next().toggle('fast'); 
 
    }); 
 

 
    $('#add').click(function() { 
 
     var $tab="<h3 id='header3' class='accClicked'><a href='#'>Section 3</a></h3><div>Bonjour Stackoverflow</div>"; 
 
     $('#accordion').append($tab); 
 

 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div id="accordion"> 
 
    <h3 id="header1" class="accClicked"><a href="#">Section 1</a></h3> 
 
    <div> Good Morning Stackoverflow</div> 
 
    <h3 id="header2" class="accClicked"><a href="#">Section 2</a></h3> 
 
    <div>Buongiorno Stackoverflow</div> 
 
    <h3 id="header3" class="accClicked"><a href="#">Section 3</a></h3> 
 
    <div>Bonjour Stackoverflow</div> 
 
</div> 
 

 
<button id="add"> 
 
Add tab 
 
</button>

http://jsfiddle.net/xso14hct/

我可以添加新的选项卡，但我不能垮了。我搜索并发现我应该以某种方式更新DOM，但我只是没有找到我该怎么做。

我可以简单地使用jquery-ui手风琴，但问题是，当您打开另一个选项卡时，它会自动关闭打开的选项卡，但我不需要。这是一个链接：JQuery-UI Accordion

Answer 1

您需要将处理程序分配到新选项卡。勾选此

$(function() { 
    var icons = { 
    header: "ui-icon-circle-arrow-e", 
    headerSelected: "ui-icon-circle-arrow-s" 
    }; 
    $("#accordion").accordion({ 
    icons: icons, 
    collapsible: true 
    }); 
    $("#header1").click(function(e) { 
    return false; 
    $("#accordion").accordion("option", "icons", false); 
    }); 
}); 

$('#accordion .accClicked') 
    .off('click') 
    .click(function() { 
    $(this).next().toggle('fast'); 
    }); 

var i = 4; 
$('#add').click(function() { 
    var $tab = "<h3 id='header" + i + "' class='accClicked'><a href='#'>Section " + i + "</a></h3><div>Bonjour Stackoverflow</div>"; 
    $('#accordion').append($tab); 
    $('#accordion .accClicked') 
    .off('click') 
    .click(function() { 
     $(this).next().toggle('fast'); 
    }); 
    i++; 
}); 

Answer 2

您可以把点击改写成一个功能，再次为您添加的每个选项卡中运行它：

$(function() { 
    var icons = { 
     header: "ui-icon-circle-arrow-e", 
     headerSelected: "ui-icon-circle-arrow-s" 
    }; 
    $("#accordion").accordion({ 
     icons: icons, 
     collapsible: true 
    }); 
    $("#header1").click(function(e) { 
     return false; 
     $("#accordion").accordion("option", "icons", false); 
    }); 
}); 

// from here we change to: 
function resetTabClick() { 
    $('#accordion .accClicked') 
     .off('click').click(function(){ 
      $(this).next().toggle('fast'); 
    }); 
} 
resetTabClick(); 

$('#add').click(function() { 
     var $tab="<h3 id='header3' class='accClicked'><a href='#'>Section 3</a></h3><div>Bonjour Stackoverflow</div>"; 
     $('#accordion').append($tab); 

     resetTabClick(); 

}); 

Answer 3

你非常接近。你只需要将你的回调函数封装在一个函数中，这样你可以在向DOM添加一个新标签时调用它。

此外，如果您想要新标签初始关闭，请添加样式display: none;。

$(function() { 
 
    var icons = { 
 
     header: "ui-icon-circle-arrow-e", 
 
     headerSelected: "ui-icon-circle-arrow-s" 
 
    }; 
 
    $("#accordion").accordion({ 
 
     icons: icons, 
 
     collapsible: true 
 
    }); 
 
    $("#header1").click(function(e) { 
 
     return false; 
 
     $("#accordion").accordion("option", "icons", false); 
 
    }); 
 
}); 
 

 
function makeNewTab() { 
 
    $('#accordion .accClicked') 
 
     .off('click').click(function(){ 
 
      $(this).next().toggle('fast'); 
 
    }); 
 
} 
 

 
$('#add').click(function() { 
 
     var $tab="<h3 id='header3' class='accClicked'><a href='#'>Section 3</a></h3><div style='display:none;'>Bonjour Stackoverflow</div>"; 
 
     $('#accordion').append($tab); 
 
     makeNewTab(); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div id="accordion"> 
 
    <h3 id="header1" class="accClicked"><a href="#">Section 1</a></h3> 
 
    <div> Good Morning Stackoverflow</div> 
 
    <h3 id="header2" class="accClicked"><a href="#">Section 2</a></h3> 
 
    <div>Buongiorno Stackoverflow</div> 
 
    <h3 id="header3" class="accClicked"><a href="#">Section 3</a></h3> 
 
    <div>Bonjour Stackoverflow</div> 
 
</div> 
 

 
<button id="add"> 
 
Add tab 
 
</button>