Question

我正在引导页面（3.0）。我在页面顶部有几个可见的小面板。在这些面板下面，我有一个较大的面板，其中包含更多默认隐藏的小面板的详细信息。当用户单击顶部的一个小面板时，它会隐藏该小面板，并在其下面显示隐藏的较大的堆叠式垂直面板以及其他信息。

我需要这样做，以便选择打开哪个隐藏面板，它将始终显示1st（在所有其他可见div之上）。我遇到的问题是它们按div在html中进行硬编码的顺序显示，但是除非向下滚动以使其在页面上可见，否则用户将看不到新的div加载。我需要所有新单击的面板来加载第一个面板，因此用户将始终看到它的加载高于所有其他现在可见的div。

我仍在学习jQuery / js。

因此，对于我的顶部（小）面板，我在面板页脚中有一个链接，单击该链接可打开关联的较大面板。单击时，它将隐藏小面板，然后显示隐藏的面板（还添加了zommIn动画）。然后，当用户关闭较大的面板时，它将再次隐藏，然后将较小的面板添加回顶部面板。

一切正常，我只需要在隐藏的div前面添加显示为1st（在其他可见div之上）即可。

这是我用来显示较大面板并隐藏相关的较小顶部面板的jQuery的示例...

//Device Panel
                $("#openDashDevices").click(function(){
                    $("#dashDevice").addClass("show zoomIn");
                    window.setTimeout( function(){
                          $("#dashDevice").removeClass("zoomIn");
                        }, 1000);
                    $("#dashDevice").removeClass("hide");
                    $("#topPanelDevice").addClass("hide");
                    $("#topPanelDevice").removeClass("show-inline zoomIn");                 

                });

这是我正在使用的jQuery，它关闭/隐藏较大的面板，并在顶部重新显示隐藏的小面板...

//Device Panel
                    $("#closeDevicePanel").click(function(){
                        $("#dashDevice").addClass("hide");
                        $("#dashDevice").removeClass("show zoomIn");
                        $("#topPanelDevice").addClass("show-inline zoomIn");
                        window.setTimeout( function(){
                              $("#topPanelDevice").removeClass("zoomIn");
                            }, 1000);
                        $("#topPanelDevice").removeClass("hide");
                    });

HTML中的一个：

<!--Dashboard Top Panels-->
                <div class="dashboardPanelsGroup fivecolumns sortable">
                    <div id="topPanelDevice" class="dashboardDevices dashboardPanels show-inline animated">
                        <div class="panel panel-primary">
                            <div class="panel-heading">
                            <div class="dragPanelTop"><i class="fa fa-arrows"></i></div>
                                <div class="row">
                                    <div class="col-xs-3 dashIcon">
                                        <i class="icon-device"></i>
                                    </div>
                                    <div class="col-xs-9 text-right">
                                        <div class="huge">1344</div>
                                        <div class="dashSubText">Computers</div>
                                    </div>
                                </div>
                            </div>
                            <a id="openDashDevices" class="dashPanelFooter" href="javascript:void(0);">
                                <div class="panel-footer">
                                    <span class="pull-left">View Devices</span>
                                    <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
                                    <div class="clearfix"></div>
                                </div>
                            </a>
                        </div>
                    </div>

这是较大面板中的 ONE 的html（默认情况下为隐藏）...

<!--Opened Dashboard Panels-->
                <div class="openedDashboardPanelsGroup sortable">
                    <div id="dashDevice" class="dashboardDevices dashboardPanelsOpen col-sm-12 animated hide">
                        <div id="panelDevices" class="panel panel-primary">
                            <div class="panel-heading">
                                <div class="dragPanelBottom"><i class="fa fa-arrows"></i></div>
                                <div class="pull-right"><button id="closeDevicePanel" type="button" class="close" title="" rel="tooltip" data-original-title="Close Panel">×</button></div>
                                <div class="row">
                                    <div class="openDashTitle">
                                        <div class=""><i class="dashIcon fa fa-bar-chart"></i>Devices</div>
                                    </div>
                                </div>
                            </div>

                            <div class="panelDashboardContent">
                                <div id="maintStatsContent" class="maintenanceStats" type="maintenanceStats">        
                                    Maint Stats goes here
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

这是一个截图，显示了我的顶部面板和几个打开的较大面板...

Answer 1

我将使用jquery动态创建它，而不是对html进行硬编码。这样，您可以prepend到容器中。

$("#closeDevicePanel").click(function() {
    $('.containerclass').prepend('yourhtml');
}

Answer 2

我明白了。我只需要使用prependTo。例如，要打开“警报”面板...

//Alerts Panel
                    $("#openDashAlerts").click(function(){
                        $("#dashAlerts").prependTo(".openedDashboardPanelsGroup");
                        $("#dashAlerts").addClass("show zoomIn");
                        window.setTimeout( function(){
                              $("#dashAlerts").removeClass("zoomIn");
                            }, 1000);
                        $("#dashAlerts").removeClass("hide");
                        $("#topPanelAlerts").addClass("hide");
                        $("#topPanelAlerts").removeClass("show-inline zoomIn"); 
                    });

现在，此动画将随我的需要一起加载，并始终将其作为父div的第一个子项。

单击以显示隐藏div时始终显示第一个，高于其他div

2 个答案: