如何查看其他面板项目

Question

这是一个面板代码，用于从数据库中检索数据并显示它。我使用 JSP 编码。

但我只能单击并查看如图所示的第一个面板项。

帮助我解决此问题，以便也显示其他窗格项目。

<div class="col-md-12">
    <div class="page4">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">Alerts</h3>
            </div> 
            <% while(rs.next()){ %>
                <ul class="list-group">
                    <li class="list-group-item">
                        <div class="row toggle" id="dropdown-detail-1" data-toggle="detail-1">// this data toggle is the cause how to fix it?
                            <div class="col-xs-10">
                                Message from <%=rs.getString("Company") %>
                            </div>
                            <div class="col-xs-2">
                                <i class="fa fa-chevron-down pull-right"/>
                            </div>
                        </div>
                        <div id="detail-1">
                            <hr/>
                            <div class="container">
                                <div class="fluid-row">
                                    <div class="col-xs-2">
                                        Send Date :
                                    </div>
                                    <div class="col-xs-10">
                                        <%=rs.getString("Msgdate") %>
                                    </div>
                                    <div class="col-xs-2">
                                        Company sent :
                                    </div>
                                    <div class="col-xs-10">
                                        <%=rs.getString("Company") %>
                                    </div>
                                    <div class="col-xs-2">
                                        Message :
                                    </div>
                                    <div class="col-xs-10">
                                        <%=rs.getString("Msg") %>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            <% } %>
        </div>
    </div>
</div>

Answer 1

您需要更改 li 中第一个 div 的 id 名称。 你可以这样做 -

<% int count=0;%>
<div class="col-md-12">
    <div class="page4">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">Alerts</h3>
            </div> 
            <% while(rs.next()){ count++; %>
                <ul class="list-group">
                    <li class="list-group-item">
                        <div class="row toggle" id="dropdown-detail-<%=count%>" data-toggle="detail-<%=count%>">
                            <div class="col-xs-10">
                                Message from <%=rs.getString("Company") %>
                            </div>
                            <div class="col-xs-2">
                                <i class="fa fa-chevron-down pull-right"/>
                            </div>
                        </div>
                        <div id="detail-<%=count%>">
                            <hr/>
                            <div class="container">
                                <div class="fluid-row">
                                    <div class="col-xs-2">
                                        Send Date :
                                    </div>
                                    <div class="col-xs-10">
                                        <%=rs.getString("Msgdate") %>
                                    </div>
                                    <div class="col-xs-2">
                                        Company sent :
                                    </div>
                                    <div class="col-xs-10">
                                        <%=rs.getString("Company") %>
                                    </div>
                                    <div class="col-xs-2">
                                        Message :
                                    </div>
                                    <div class="col-xs-10">
                                        <%=rs.getString("Msg") %>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            <% } %>
        </div>
    </div>
</div>