[英]Materialize collapsible inside modal expands all in list on click
I have a collapsible list inside a modal. 我在模态中有一个可折叠列表。 Whenever I click on a collapsible header it expands all of the collapsible bodys in the list instead of just the one I clicked on.
每当我单击可折叠标题时,它都会扩展列表中的所有可折叠主体,而不仅仅是我单击的那个。
Any help would be greatly appreciated! 任何帮助将不胜感激!
Please try this 请尝试这个
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>IndexStackOverflow102</title>
<style type="text/css">
ui-accordion-content-active {
height: 100px !important;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.min.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript">
$(function () {
$("#accordion").accordion();
$("#theButton").click(function () {
$("#modalPlaced").modal('show');
$("#accordionInPopup").accordion({
event: "click",
active: true,
collapsible: true,
autoHeight: true
});
})
})
</script>
</head>
<body>
<div id="modalPlaced" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-content">
<div class="modal-body" style="height:300px">
<p>Popup</p>
<div id="accordionInPopup">
<h3>Add</h3>
<div style="height:300px">
<p style="height:300px">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley
</p>
</div>
<h3>Edit</h3>
<div>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley
</p>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div>
<input type="button" id="theButton" value="ShowPopup" />
</div>
</body>
</html>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.