将 div 定位到第一位 - 像堆栈一样

Question

我有一个创建的div ser，但仅在布尔值为 true 时才显示，它工作正常，但是如果我有两个div 并最大化它，该div 在第一个div 下方最大化，依此类推，每个div 都会最大化在 html 上创建它的位置。我想，当最大化ondediv时，它传递到第一名，高于第一名。

我做了一个小提琴，模仿现在的功能，例如，我想点击div#3，它高于div#1，然后点击div#4，高于div#

3，那是在div#1之上。

http://jsfiddle.net/zwpCF/112/

基本上，每当我点击一个div时，我都希望它

凌驾于所有其他div之上。

我的div 代码是：

DIV1

<div class="col-lg-6">
    <h4 class="panel-title">
        <div class="card-header">
            <select (change)="onChange($event.target.value)" data-ng-model="barChart" ngbTooltip="{{'chartType' | translate}}">
            //options
            </select>
            <i class="fa fa-expand icons topright" data-toggle="collapse" data-parent="#accordion" href="#timeline1" ngbTooltip="{{'Expand' | translate}}">
            </i>
        </div>
    </h4>
    <div class="card-block">
        <canvas id="barChart" [hidden] = "!barChartSelected"></canvas>
        <canvas id="chart2" [hidden] = "!chart2Selected"></canvas>
        <canvas id="rdr" [hidden] = "!radarChartSelected"></canvas>
        <canvas id="pp1" [hidden] = "!pp1ChartSelected"></canvas>
    </div>
</div>
<div id="timeline1" class="panel-collapse collapse"></div>

##DIV2

<div class="col-lg-6">
 <h4 class="panel-title">
     <div class="card-header">
        <select (change)="onChange($event.target.value)" data-ng-model="barChart" ngbTooltip="{{'chartType' | translate}}">
            //options
        </select>
        <i class="fa fa-expand icons topright" data-toggle="collapse" data-parent="#accordion" href="#timeline2" ngbTooltip="{{'Expand' | translate}}">
        </i>
        </div>
    </h4>
    <div class="card-block" [hidden] = "!visibleDiv1">
        <canvas id="barChart_2" [hidden] = "!barChartSelected2"></canvas>
        <canvas id="chart2_2" [hidden] = "!chart2Selected2"></canvas>
        <canvas id="rdr_2" [hidden] = "!radarChartSelected2"></canvas>
        <canvas id="pp1_2" [hidden] = "!pp1ChartSelected2"></canvas>
    </div>
</div>
<div id="timeline2" class="panel-collapse collapse"></div>
##DIV3 and ##DIV4 are lookalike ##DIV1 and ##DIV2

Answer 1

您可以使用

prependTo

$("#source").prependTo("#destination");

它将匹配元素集中的每个元素插入到目标的开头。

这是文档。

工作片段：

$("#div1").click(function() {
  $("#div1").prependTo($("#main"));
});
$("#div2").click(function() {
  $("#div2").prependTo($("#main"));
});
$("#div3").click(function() {
  $("#div3").prependTo($("#main"));
});

.sorteable {
    width: 300px;
    border: 5px solid grey;
    padding: 25px;
    margin: 25px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
  <div id="div1" class="sorteable">Div1</div>
  <div id="div2" class="sorteable">Div2</div>
  <div id="div3" class="sorteable">Div3</div>
</div>

Answer 2

这是

怎么回事(我添加的行的评论( - 我使用最接近来获取容器并预置将容器移动到顶部。

$('.panel-title').click(function() {
  var $this = $(this), // this is the title
    $column = $this.closest('.col-md-6'); // this is the full item
  // Find parent with the class that starts with "col-md"
  // Change class to "col-md-3"
  $this.closest('[class^="col-md"]')
    .toggleClass('col-md-6 col-md-12')
    // Find siblings of parent with similar class criteria
    // - if all siblings are the same, you can use ".siblings()"
    // Change class to "col-md-2"
    .siblings('[class^="col-md"]')
    .removeClass('col-md-3')
    .addClass('col-md-6');
  $column.parent().prepend($column) // prepend the column to the parent - moves it to the top
});

更新的小提琴