我正在引导页面（3.0）。我在页面顶部有几个可见的小面板。在这些面板下面，我有较大的面板，其中包含更多默认情况下隐藏的顶部小面板的详细信息。当用户单击顶部的一小块面板时，它会隐藏该小面板，并在其下方显示隐藏的较大的堆叠式垂直面板以及其他信息。
我需要这样做，以便无论选择哪个隐藏面板打开，它都将始终显示1st（在所有其他可见div之上）。我遇到的问题是它们按div在HTML中进行硬编码的顺序显示，但是除非向下滚动以使其在页面上可见，否则用户将看不到新的div加载。我需要所有新单击的面板来加载1st，因此用户将始终看到它加载高于其他所有现在可见的div。
我还在学习jQuery / js。
因此，对于我的顶部（小）面板，我在面板页脚中有一个链接，单击该链接可打开关联的较大面板。单击时，它将隐藏小面板，然后显示隐藏的面板（还添加了zommIn动画）。然后，当用户关闭较大的面板时，它将再次隐藏，然后将较小的面板添加回顶部面板。
一切都很好，我只需要将隐藏的div放在ALWAYS显示的第一位置即可（在其他可见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>
这是较大面板之一的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>
这是一个截图，显示了我的顶部面板和几个打开的较大面板...
最佳答案
与其对html进行硬编码，不如使用jQuery动态创建它。这样，您可以将其prepend放到容器中。
$("#closeDevicePanel").click(function() {
$('.containerclass').prepend('yourhtml');
}