Question

我有一系列创建的div，但只有在布尔值为true时显示，它才能正常工作，但如果我有两个div并最大化它，则div最大化在第一个div之下，依此类推，每个div最大化它在html上创建的位置。我想，当最大化onde div时，它首先传递到第一个位置。

我做了一个小提琴，现在模仿了那个小提琴上的功能，例如，我想点击div＃3然后它超过div＃1，然后点击div＃4然后超过div＃3，就在div＃1之上。

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

基本上，每当我点击一个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");

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

这是documentation。

工作片段：

$("#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

这是怎么回事（我已添加的注释） - 我使用最接近的容器来获取容器并在前面移动容器到顶部。

{{1}}

Updated fiddle

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

2 个答案: