I want to know whether there exists a method that I could add a new section using jQuery UI
我想知道是否存在可以使用jQuery UI添加新节的方法
This is what I do so far without any error, but the accordion don't work since I add a new one
这是我到目前为止没有任何错误,但手风琴不起作用,因为我添加了一个新的
$( function() {
$( "#accordion" ).accordion();
$('#addNewSection').on('click', function() {
var newH3 = document.createElement('h3');
var newDiv = document.createElement('div');
var acc = document.getElementById('accordion');
var number = document.getElementsByTagName('h3').length;
newH3.innerText = 'Section' + (parseInt(number) + 1) + "(This won't collapse)";
newDiv.innerText = 'This is a new section after clicking the button';
acc.appendChild(newH3);
acc.appendChild(newDiv);
});
} );
h3 { background-color: "blue"; }
div { background-color: "lightgreen"; }
<div id="accordion">
<h3>Section 1 (collapsible)</h3>
<div>
<p>
This is the context in section 1
</p>
</div>
<h3>Section 2 (collapsible)</h3>
<div>
<p>
This is the context in section 2
</p>
</div>
</div>
<button id="addNewSection">AddOne</button>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
How to fix it? Or is there any official method I can use?
怎么解决?或者我可以使用任何官方方法吗?
1 个解决方案
#1
5
You can use refresh
method of accordion at the end of your click event (Documentation) :
您可以在点击事件结束时使用手风琴的刷新方法(文档):
$( function() {
$( "#accordion" ).accordion();
$('#addNewSection').on('click', function() {
var newH3 = document.createElement('h3');
var newDiv = document.createElement('div');
var acc = document.getElementById('accordion');
var number = document.getElementsByTagName('h3').length;
newH3.innerText = 'Section' + (parseInt(number) + 1) + "(This WILL collapse)";
newDiv.innerText = 'This is a new section after clicking the button';
acc.appendChild(newH3);
acc.appendChild(newDiv);
$( "#accordion" ).accordion("refresh");
});
} );
h3 { background-color: "blue"; }
div { background-color: "lightgreen"; }
<div id="accordion">
<h3>Section 1 (collapsible)</h3>
<div>
<p>
This is the context in section 1
</p>
</div>
<h3>Section 2 (collapsible)</h3>
<div>
<p>
This is the context in section 2
</p>
</div>
</div>
<button id="addNewSection">AddOne</button>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
#1
5
You can use refresh
method of accordion at the end of your click event (Documentation) :
您可以在点击事件结束时使用手风琴的刷新方法(文档):
$( function() {
$( "#accordion" ).accordion();
$('#addNewSection').on('click', function() {
var newH3 = document.createElement('h3');
var newDiv = document.createElement('div');
var acc = document.getElementById('accordion');
var number = document.getElementsByTagName('h3').length;
newH3.innerText = 'Section' + (parseInt(number) + 1) + "(This WILL collapse)";
newDiv.innerText = 'This is a new section after clicking the button';
acc.appendChild(newH3);
acc.appendChild(newDiv);
$( "#accordion" ).accordion("refresh");
});
} );
h3 { background-color: "blue"; }
div { background-color: "lightgreen"; }
<div id="accordion">
<h3>Section 1 (collapsible)</h3>
<div>
<p>
This is the context in section 1
</p>
</div>
<h3>Section 2 (collapsible)</h3>
<div>
<p>
This is the context in section 2
</p>
</div>
</div>
<button id="addNewSection">AddOne</button>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>