以下是一个示例。
$(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);
});
&#13;
<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>
&#13;
我可以添加新标签,但我无法将其折叠。我搜索并发现我应该以某种方式更新DOM,但我还没有找到我怎么做。
我可以简单地使用jquery-ui手风琴,但问题是,当你打开另一个标签时它会自动关闭打开的标签,但我不需要它。以下是指向它的链接:JQuery-UI Accordion
答案 0 :(得分:0)
您需要将处理程序分配给新选项卡。检查一下
$(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++;
});
答案 1 :(得分:0)
您可以将点击重写转换为函数,然后为您添加的每个标签再次运行它:
$(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();
});
答案 2 :(得分:0)
你非常接近。您只需要为函数中的选项卡包装回调函数,以便在向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>