崩溃的动态Bootstrap列表无法正常工作

时间:2018-06-26 06:56:44

标签: javascript jquery html5 bootstrap-4 thymeleaf

我已经使用Bootstrap和thymeleaf创建了动态列表,列表还包含无法正常运行的折叠功能,aria-expanded =“ false”无法正常工作,我浏览了很多,但没有浏览任何使用thymeleaf动态创建列表的解决方案。

  • 当页面加载时,应关闭所有可折叠面板,因为我使用了aria-expanded =“ false”,但无法正常工作。

  • 随着列表的产生,只需点击几下即可实现折叠。

下面是代码和图像。

<!DOCTYPE html>
   <html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title></title>
        <!-- Font Awesome -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
        <!-- Bootstrap core CSS -->
        <link href="/resources/css/bootstrap.min.css" rel="stylesheet">
        <!-- Material Design Bootstrap -->
        <link href="/resources/css/mdb.min.css" rel="stylesheet">
        <!-- Your custom styles (optional) -->
        <link href="/resources/css/style.css" rel="stylesheet">
        <link href="/resources/css/jquery.qtip.min.css" rel="stylesheet"/>
        <link href="/resources/css/icheck.css" rel="stylesheet" />
        <link href="/resources/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />
        <link href="/resources/css/sweet-alert.css" rel="stylesheet" />
        <link href="/resources/css/custom-accordin.css" rel="stylesheet" />

    </head>
    <body>
        <div class="container" th:fragment="content">
        <header>
            <!--Main Navigation-->
            <nav class="navbar fixed-top scrolling-navbar navbar-expand-lg navbar-dark blue-grey darken-2">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item"> <a class="nav-link" href="EmployerDashboard.html"><i class="fa fa-chevron-left fa-2x"></i></a> </li>
                </ul>
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item"> <a class="navbar-brand" href="#">Submission status</a> </li>
                </ul>
                <ul class="navbar-nav nav-flex-icons">
                    <li class="nav-item"><a href="#" data-activates="slide-out" class="button-collapse nav-link"><i class="fa fa-bars fa-2x"></i></a></li>
                </ul>
            </nav>
        </header>
        <!--Main Navigation-->
        <div class="container-fluid">
            <!--Grid row-->
            <div class="row">
                <div class="col-12">
                    <div class="mx-auto">
                        <div class="alert blue-grey lighten-4" role="alert" style="border-top: 2px solid #000;">
                            <div class="row">
                                <div class="col text-center">
                                    <p class="h6"><strong th:text="${efiledHdrBean.payPeriod}"></strong><br/>
                                        <small>Submission Period</small></p>
                                </div>
                                <div class="col text-center">
                                    <p  class="h6"><strong th:text="${@codeMapUtil.getCodeValue(efiledHdrBean.payFreq, 'PAY_FREQ_DESC').concat('ly')}"></strong><br/>
                                        <small>Pay Frequency</small></p>
                                </div>
                                <div class="col text-center">
                                    <p  class="h6"><strong th:text="${efiledHdrBean.ppType}"></strong><br/>
                                        <small>Pension Prov.</small></p>
                                </div>
                            </div>
                        </div>
                        <div class="alert alert-success alert-dismissible" role="alert">
                            <p class="text-center"><i class="fa fa-check fa-2x text-success"></i> Your Contribution data is accepted by NEST<br />
                            Amount Due to Pension provider: <strong>&pound; 40.72</strong></p>
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <ul class="list-group" >

                            <div class="accordion" id="accordionEx" role="tablist" aria-multiselectable="true">

                               <!--  <li class="list-group-item" th:each="listBean,iterator: ${contributionStatus}"> -->
                                     <li class="list-group-item">
                                    <div class="card" th:each="listBean,iterator: ${contributionStatus}" >

                                        <div class="card-header" role="tab" th:id="'heading' + ${iterator.index}"> <a class="collapsed black-text" data-toggle="collapse" th:href="'#collapse' + ${iterator.index}" aria-expanded="false" th:attr = "aria-controls='collapse' + ${iterator.index}"> <i class="fa fa-angle-down rotate-icon float-right"></i>
                                            <div class="row">
                                                <div class="col-7"> <span class="icon-round pull-left">
                                                    <p class="icon"><span th:text=" ${#strings.substring(listBean.eeSurname,0,1) + #strings.substring(listBean.eeFname,0,1)}"></span></p>
                                                    </span>
                                                    <p class="h5 list-group-item-heading"><strong><span th:text="${listBean.eeSurname}"></span> , <span th:text="${listBean.eeFname}"></span></strong></p>
                                                    <p class="list-group-item-text mb-2"><span th:text="${listBean.eeWksNo}"></span> <span class="badge grey lighten-2 black-text" th:text="${listBean.assessStatus}"></span></p>
                                                </div>
                                                <div class="col-4 pr-0">
                                                    <p class="h5 list-group-item-heading text-right"><span class="float-left">&pound;</span><span th:text="${listBean.eePenEarnings}"></span></p>
                                                </div>
                                            </div>
                                            </a> </div>

                                        <div  th:id="'collapse' + ${iterator.index}" class="collapse show" role="tabpanel" data-parent="#accordionEx"  th:attr="aria-labelledby='heading' + ${iterator.index}">
                                            <div class="card-body black-text">
                                                <p class="h6">Pensionable Earnings: &pound; <span th:text="${listBean.eePenEarnings}"></span></p>
                                                <ul class="list-group" >
                                                    <li class="list-group-item">
                                                        <div class="row">
                                                            <div class="col-5 pr-0">
                                                                <p class="list-group-item-heading mb-0">Employer</p>
                                                            </div>
                                                            <div class="col-4 p-0">
                                                                <p class="list-group-item-heading mb-0">Rate(%): <span th:text="${listBean.erContribRate}"></span></p>
                                                            </div>
                                                            <div class="col-3 pl-0">
                                                                <p class="list-group-item-heading text-right mb-0"><span class="float-left">&pound;</span><span th:text="${listBean.erDedValue}"></span></p>
                                                            </div>
                                                        </div>
                                                    </li>
                                                    <li class="list-group-item">
                                                        <div class="row">
                                                            <div class="col-5 pr-0">
                                                                <p class="list-group-item-heading mb-0">Employee</p>
                                                            </div>
                                                            <div class="col-4 p-0">
                                                                <p class="list-group-item-heading mb-0">Rate(%): <span th:text="${listBean.eeContribRate}"></span></p>
                                                            </div>
                                                            <div class="col-3 pl-0">
                                                                <p class="list-group-item-heading text-right mb-0"><span class="float-left">&pound;</span><span th:text="${listBean.eeDedValue}"></span></p>
                                                            </div>
                                                        </div>
                                                    </li>
                                                    <li class="list-group-item">
                                                        <div class="row">
                                                            <div class="col-9 pr-0">
                                                                <p class="list-group-item-heading mb-0">Additional Voluntary Contribution (AVC)</p>
                                                            </div>
                                                            <div class="col-3 pl-0">
                                                                <p class="list-group-item-heading text-right mb-0"><span class="float-left">&pound;</span><span th:text="${listBean.eeAvcDedValue}"></span></p>
                                                            </div>
                                                        </div>
                                                    </li>
                                                    <li class="list-group-item grey lighten-4">
                                                        <div class="row">
                                                            <div class="col-9 pr-0">
                                                                <p class="list-group-item-heading mb-0"><strong>Total Contribution</strong></p>
                                                            </div>
                                                            <div class="col-3 pl-0">
                                                                <p class="list-group-item-heading text-right mb-0"><strong><span class="float-left">&pound;</span><span th:text="${listBean.erContribution}"></span></strong></p>
                                                            </div>
                                                        </div>
                                                    </li>
                                                </ul>

                                                <ul class="list-group mt-4" aria-hidden="true">
                                                    <li class="list-group-item grey lighten-3">
                                                        <div class="row">
                                                            <div class="col-9 pr-0">
                                                                <p class="list-group-item-text mb-0"><strong>Partial / Non-Payment of Contribution</strong></p>
                                                            </div>
                                                        </div>
                                                    </li>
                                                    <li class="list-group-item">
                                                        <div class="row">
                                                            <div class="col-5 pr-0">
                                                                <p class="list-group-item-heading mb-0">Reason</p>
                                                            </div>
                                                            <div>
                                                                <p class="list-group-item-heading text-right mb-0"><span th:text="${listBean.partialContribReason}"></span></p>
                                                            </div>
                                                        </div>
                                                    </li>
                                                    <li class="list-group-item">
                                                        <div class="row">
                                                            <div class="col-5 pr-0">
                                                                <p class="list-group-item-heading mb-0">Effective Date</p>
                                                            </div>
                                                            <div>
                                                                <p class="list-group-item-heading text-right mb-0"><span th:text="${listBean.partialContribEffectiveDate}"></span></p>
                                                            </div>
                                                        </div>
                                                    </li>
                                                </ul>

                                            </div>
                                        </div>
                                    </div>
                                </li>
                              </div>  
                        </ul>
                    </div>
                    <!--/.Card-->
                </div>
            </div>

        </div>
        <!--Main container-->
        <!-- SCRIPTS -->
        <!-- JQuery -->
        <script type="text/javascript" th:src="@{/resources/js/jquery.3.2.1.min.js}"></script>
        <!-- Bootstrap tooltips -->
        <script type="text/javascript" th:src="@{/resources/js/popper.min.js}"></script>
        <!-- Bootstrap core JavaScript -->
        <script type="text/javascript" th:src="@{/resources/js/bootstrap.min.js}"></script>
        <!-- MDB core JavaScript -->
        <script type="text/javascript" th:src="@{/resources/js/mdb.min.js}"></script><!-- 
        <script type="text/javascript" th:src="@{/resources/js/thymol.js}"></script>
        <script type="text/javascript" th:src="@{/resources/js/thymolconfig.js}"></script> -->
        <script type="text/javascript" th:src="@{/resources/js/custom.js}"></script>
        <script th:src="@{/resources/js/numericfield.js}"></script>
        <script th:src="@{/resources/js/moment.2.10.6.min.js}"></script>
        <!-- SCRIPTS -->

        <!-- <!-- thymol JavaScript -->

        <script th:src="@{/resources/js/main.js}"></script>
        <script th:src="@{/resources/js/sweet-alert.min.js}"></script>
        <script th:src="@{/resources/js/utils.js}"></script>
        <script th:src="@{/resources/js/numericfield.js}"></script>
        <script th:src="@{/resources/js/date.js}"></script>
        <script th:src="@{/resources/js/icheck.min.js}"></script>
        <script th:src="@{/resources/js/dynamicFormFields.js}"></script>
        <script th:src="@{/resources/js/moment.js}"></script>
        <script th:src="@{/resources/js/bootstrap-datetimepicker.min.js}"></script>
        <script th:src="@{/resources/js/jquery.qtip.min.js}"></script>
        <script th:src="@{/resources/js/bc-quicklink.js}"></script>
            <script th:inline="javascript">
                /*<![CDATA[*/
        // SideNav Initialization
        $(document).ready(function () {
            $(".button-collapse").sideNav({
                edge: 'right',
                closeOnClick: true 
                });
                var container = document.getElementById('slide-out');
                Ps.initialize(container);
        });
        </script>
        <script>
        // Material Select Initialization
        $(document).ready(function () {
            $('.mdb-select').material_select();
        });
        /*]]>*/


        </script>


        </div>
    </body>
</html>

帮我解决问题。

Image containing dynamic list with improper display

0 个答案:

没有答案