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

问题描述

我正在处理引导页面（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>

这是其中一个较大面板的 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>

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

标签： javascriptjqueryhtmlcsstwitter-bootstrap-3

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

问题描述

解决方案

推荐阅读