我有一个部门如下。
<div class="draggableParent">
<div class="row" id="draggablePanelList">
@if (Model.chartConfigDataList.Count > 0)
{
for (var i = 0; i < Model.chartConfigDataList.Count; i++)
{
<div class="col-md-4 col-sm-6 col-xs-12 mainCls" id="@ChartNameForResize">
<div class="x_panel">
<div class="x_title">
<h2 id="Header_ChartName">
@obj.chartDetail.ChartName
</h2>
@*CHART SETTINGS MENU*@
<ul class="nav navbar-right panel_toolbox">
<li><a class="printChart" title="Save Image"> <i class="glyphicon glyphicon-save"></i> </a> </li>
<li><a class="expand-link" title="Expand Chart" onclick="horizontalResize(@ChartNameForResize)"><i class="glyphicon glyphicon-resize-horizontal"></i></a></li>
@*<li><a class="TableView" title="View in Table" onclick="@LogChartname"> <i class="fa fa-table"></i> </a> </li>*@
<li><a class="chart-info-link" title="Chart Info"><i class="fa fa-info"></i></a></li>
<li><a class="collapse-link" title="Collapse"><i class="fa fa-chevron-up"></i></a></li>
</ul>
</div>
<div class="x_content">
<div>
@{ Html.RenderAction(@obj.ChartView, "DA_CPC", new { ChartType = @obj.ChartType });}
</div>
</div>
</div>
<input id="ChartID_Hidden" type="hidden" value="@obj.chartDetail.ChartID" data-parentId="@obj.chartDetail.ParentID" />
</div>
}
}
</div>
</div>
我的Jquery代码如下：
jQuery(function ($) {
var panelList2 = $('#draggablePanelList');
panelList2.sortable({
handle: '.x_title',
opacity: 0.4,
cursor: 'move',
// scroll: false,
containment: ".draggableParent",
forceHelperSize: true,
revert: 'true',
update: function () {
$('.mainCls', panelList2).each(function (index, elem) {
var $listItem = $(elem),
newIndex = $listItem.index();
});
}
});
});
在我的 div 中，我有一个折叠链接，如下图所示：
在上面对齐很好。但是当我点击第一个图表链接的展开按钮时，所有图表都会向左移动。
但是，如果我展开最后一个图表的展开按钮，它会移动下面的所有后续图表。
如何使我的前 2 个<div>展开按钮的效果与第 3 个展开按钮的效果相同<div>