如何在单击显示时始终显示隐藏的 div，高于其他 div答案

【问题标题】：How to display hidden divs always 1st, above other divs when clicked to show如何在单击显示时始终显示隐藏的 div，高于其他 div
【发布时间】：2018-07-09 22:49:40
【问题描述】：

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

我需要这样做，以便无论选择哪个隐藏面板打开，它都将始终显示第一个（在所有其他可见 div 之上）。我遇到的问题是它们按 div 在 HTML 中硬编码的顺序显示，但是用户不会看到新的 div 加载，除非他们向下滚动以在页面上看到它。我需要所有新点击的面板来加载第一个，所以用户总是会看到它加载在所有其他现在可见的 div 之上。

我还在学习 jQuery/js。

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

一切都很好，我只需要将隐藏的 div 预先设置为始终显示为第一个（在其他可见 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>
</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>

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

【问题讨论】：

标签： javascript jquery html css twitter-bootstrap-3

【解决方案1】：

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

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

【讨论】：

谢谢塞萨尔。如何使用 jQuery 动态添加 html？我现在正在学习 jQuery。在上面的示例中，我在 ('yourhtml') 中输入了什么？需要动态加载 div 的父 div 是 .openedDashboardPanelsGroup。单击功能的其中一个小面板的 ID 是#openDashDevices。那么它会像 $("#openDashDevices").click(function() { $('.openedDashboardPanelsGroup).prepend('yourhtml'); } 这样的东西吗？如果是。yourhtml 中有什么？如果不是，你能给我一个例子吗？谢谢你的帮助。

【解决方案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 的第一个子元素。

【讨论】：