我发现了Bootstrap Accordion Link。它可以很好地添加新的div手风琴。但我的问题是在我刷新页面后恢复正常。我尝试将此代码应用于我的查看效果。
可以添加一个永久的div手风琴吗？
我打算这样做手风琴，因为我File Maintenance Positions就像Senators , President.. etc一样。
$(document).ready(function() {
var counter = 1;
var wrapper = $("#accordion");
$("#addButton").on("click", function(e) {
e.preventDefault();
var catgName = prompt("Please Add your category name");
if (catgName == '') {
catgName = 'Catg#' + counter;
}
if (catgName != null) {
var ariaExpanded = false;
var expandedClass = '';
var collapsedClass = 'collapsed';
if (counter == 1) {
ariaExpanded = true;
expandedClass = 'in';
collapsedClass = '';
}
$(wrapper).append('<div class="col-sm-12" style="margin-bottom: 0;"><div class="panel panel-default" id="panel' + counter + '">' +
'<div class="panel-heading" role="tab" id="heading' + counter + '"><h4 class="panel-title">' +
'<a class="' + collapsedClass + '" id="panel-lebel' + counter + '" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse' + counter + '" ' +
'aria-expanded="' + ariaExpanded + '" aria-controls="collapse' + counter + '"> ' + catgName + ' </a><div class="actions_div" style="position: relative; top: -26px;">' +
'<a href="#" accesskey="' + counter + '" class="remove_ctg_panel exit-btn pull-right"><span class="glyphicon glyphicon-remove"></span></a>' +
'<a href="#" accesskey="' + counter + '" class="edit_ctg_label pull-right"><span class="glyphicon glyphicon-edit "></span> Edit</a>' +
'<a href="#" accesskey="' + counter + '" class="pull-right" id="addButton2"> <span class="glyphicon glyphicon-plus"></span> Add child category</a></div></h4></div>' +
'<div id="collapse' + counter + '" class="panel-collapse collapse ' + expandedClass + '"role="tabpanel" aria-labelledby="heading' + counter + '">' +
'<div class="panel-body"><div id="TextBoxDiv' + counter + '"></div><a class="btn btn-xs btn-primary" accesskey="' + counter + '" id="addButton3" ><span class="glyphicon glyphicon-plus"></span> Add New Attributes</a>' +
'<a class="btn btn-xs btn-success" accesskey="' + counter + '" id="ajax_submit_button" >Done</a></div></div></div></div>');
counter++;
}
});
var x = 1;
$(wrapper).on("click", "#addButton2", function(e) {
e.preventDefault();
var parentId = $(this).attr('accesskey');
var parentPanel = '#panel' + parentId;
var catgName = prompt("Please Add your category name");
if (catgName == '') {
catgName = ' P#' + parentId + ' Catg#' + counter;
}
if (catgName != null) {
var ariaExpanded = false;
var expandedClass = '';
var collapsedClass = 'collapsed';
$(wrapper).find(parentPanel).append('<div class="col-sm-12" style="margin-bottom: 0;"><div class="panel panel-default" id="panel' + counter + '">' +
'<div class="panel-heading" role="tab" id="heading' + counter + '"><h4 class="panel-title">' +
'<a class="' + collapsedClass + '" id="panel-lebel' + counter + '" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse' + counter + '" ' +
'aria-expanded="' + ariaExpanded + '" aria-controls="collapse' + counter + '"> ' + catgName + ' </a><div class="actions_div" style="position: relative; top: -26px;">' +
'<a href="#" accesskey="' + counter + '" class="remove_ctg_panel exit-btn pull-right"><span class="glyphicon glyphicon-remove"></span></a>' +
'<a href="#" accesskey="' + counter + '" class="edit_ctg_label pull-right"><span class="glyphicon glyphicon-edit"></span> Edit</a>' +
'<a href="#" accesskey="' + counter + '" class="pull-right" id="addButton2"> <span class="glyphicon glyphicon-plus"></span> Add child category</a></h4></div>' +
'<div id="collapse' + counter + '" class="panel-collapse collapse ' + expandedClass + '"role="tabpanel" aria-labelledby="heading' + counter + '">' +
'<div class="panel-body"><div id="TextBoxDiv' + counter + '"></div><a class="btn btn-xs btn-primary" accesskey="' + counter + '" id="addButton3" ><span class="glyphicon glyphicon-plus"></span> Add New Attributes</a>' +
'<a class="btn btn-xs btn-success" accesskey="' + counter + '" id="ajax_submit_button" >Done</a></div></div></div></div>');
x++;
counter++;
}
});
$(wrapper).on("click", ".remove_ctg_panel", function(e) {
e.preventDefault();
var accesskey = $(this).attr('accesskey');
$('#panel' + accesskey).remove();
counter--;
x--;
});
var y = 1;
$(wrapper).on("click", "#addButton3", function(e) {
e.preventDefault();
var accesskey = $(this).attr('accesskey');
y++;
$('#panel' + accesskey).find('#TextBoxDiv' + accesskey).append('<div class="col-md-12 form-group"><input type="text" name="ctgtext[]" class="form-control" style="width: 40%;float: left;"/><a href="#" class="remove_field exit-btn"><span class="glyphicon glyphicon-remove"></a></div>');
});
$(wrapper).on("click", ".remove_field", function(e) {
e.preventDefault();
$(this).parent('div').remove();
y--;
})
$(wrapper).on("click", ".edit_ctg_label", function(e) {
var panelId = $(this).attr('accesskey');
var catgName = prompt("Please Change your category name");
if (catgName == '') {
return false;
}
if (catgName != null) {
$('#panel' + panelId).find("#panel-lebel" + panelId).html('').html(catgName);
}
});
});#accordion .panel-heading {
padding: 0;
}
#accordion .panel-title>a {
display: block;
padding: 0.4em 0.6em;
outline: none;
font-weight: bold;
text-decoration: none;
}
#accordion .panel-title>a.accordion-toggle::before,
#accordion a[data-toggle="collapse"]::before {
content: "\e113";
float: left;
font-family: 'Glyphicons Halflings';
margin-right: 1em;
}
#accordion .panel-title>a.accordion-toggle.collapsed::before,
#accordion a.collapsed[data-toggle="collapse"]::before {
content: "\e114";
}
#accordion.panel-group .panel {
margin-top: 5px;
}
#accordion .actions_div > a {
font-size: 14px;
margin-right: 15px;
}
#accordion .actions_div > a.exit-btn {
color: #dd4b39;
}
#accordion .remove_field.exit-btn {
color: #dd4b39;
margin-left: 7px;
float: left;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="col-md-12">
<!-- Horizontal Form -->
<div class="panel panel-success">
<div class="panel-header with-border">
<h2 class="panel-title text-center">Add Category</h2>
</div>
<!-- /.panel-header -->
<!-- form start -->
<form class="form-horizontal">
<div class="panel-body">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
</div>
<div class="col-md-12 text-center" style="margin-top:15px;">
<button class="btn btn-success" id="addButton" value=""><span class="glyphicon glyphicon-plus"></span> Add New Field</button>
</div>
</div>
<!-- /.panel-body -->
<div class="panel-footer">
<div class="col-sm-offset-3 col-sm-6 text-center">
</div>
</div>
<!-- /.box-footer -->
</form>
</div>
</div>
</div>
感谢。