Question

我在模态中有一个可折叠列表。每当我单击可折叠标题时，它都会扩展列表中的所有可折叠主体，而不仅仅是我单击的那个。

任何帮助将不胜感激！

Answer 1

请尝试这个

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

单击可实现内部的可实现折叠视图

1 个答案: