单击以显示时，如何始终显示隐藏的 div，位于其他 div 上方

Question

I am working on a bootstrap page (3.0). I have several small panels across the top of the page that are visible. Below these panels I have larger panels that contain much more detail of the small panels across the top that are hidden by default . When a user clicks on one of the small panels across the top, it hides the small panel and displays hidden larger stacked vertical panels below it with the additional info.

I need to make it so that whichever hidden panel is selected to open, that it will always show 1st (above all other visible divs). The problem I am having is they are showing in the order the divs are hard coded in the HTML, however users will not see the new div load unless they scroll down to see it visible on the page. I need all newly clicked panels to load 1st, so users will always see it load above all other now visible divs.

I am still learning jQuery/js.

So, for my top (small) panels, I have a link in the panel-footer that opens the associated larger panels when clicked. It hides the small panel when clicked, then shows the hidden panel (adds a zommIn animation as well). Then when a user closes the larger panel, it hides it again, then adds the small panel back to the top panels.

It is all working great, I just need to prepend the hidden divs to ALWAYS display as 1st (above the other visible divs).

Here is an example of the jQuery I am using to show the larger panels and hide the associated small top panels...

//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");                 

});

And here is the jQuery I am using that closes/hides the larger panels and re-shows the hidden small panel across the top...

//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 of ONE of the top panels:

<!--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>

And here is the html of ONE of the larger panels (hidden by default)...

<!--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>

Here is a screenshot showing my top panels and a couple of the larger panels opened...

Answer 1

Instead of hard coding the html I would create it dynamically with jquery. That way you can just prepend it to the container.

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

Answer 2

I got it to work. I just needed to use prependTo. For example, to open the Alerts panel...

//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"); 
                    });

This now loads with my animation just like I need, and always prepends it as the 1st child of the parent div.