Javascript Materialize可折叠内部模式在单击时展开所有内部列表_Javascript_Jquery_Materialize

Javascript Materialize可折叠内部模式在单击时展开所有内部列表

javascript jquery

Javascript Materialize可折叠内部模式在单击时展开所有内部列表,javascript,jquery,materialize,Javascript,Jquery,Materialize,我有一个可折叠的列表在模态中。每当我点击一个可折叠的标题，它就会展开列表中所有可折叠的主体，而不仅仅是我点击的主体任何帮助都将不胜感激请试试这个 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>IndexStackOverflow102</title> <st

我有一个可折叠的列表在模态中。每当我点击一个可折叠的标题，它就会展开列表中所有可折叠的主体，而不仅仅是我点击的主体

任何帮助都将不胜感激

请试试这个

<!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>


IndexStackOverflow102
用户界面手风琴内容激活{
高度：100px！重要；
}
$（函数（）{
$（“#手风琴”）。手风琴（）；
$（“#按钮”）。单击（函数（）{
$（“#modalPlaced”）.modal（'show'）；
$（“#手风琴弹出窗口”）。手风琴({
事件：“点击”，
主动：对，
可折叠的：是的，
自动高度：真
});
})
})
弹出窗口
添加

Lorem Ipsum只是印刷和排版行业的虚拟文本。自打16世纪一家不知名的印刷商在厨房里印刷时，Lorem Ipsum就一直是业界标准的虚拟文本

编辑

Lorem Ipsum只是印刷和排版行业的虚拟文本。自打16世纪一家不知名的印刷商在厨房里印刷时，Lorem Ipsum就一直是业界标准的虚拟文本

接近