Question

我有两个div（一个大而另一个小）。较小的div中有一个按钮。在较小的div中按钮的onClick，我希望div换掉它的位置，换句话说，更大的div变得越来越小而大的变大。我能够实现这一点，但是我无法在交换后将按钮移动到较小的div。

交换之前

交换后

注意：我希望删除主面板右下角的按钮并将其移至位置面板的右下角。

主面板

<div class="nav-tabs-custom" id="mainPanel">
    <!-- Tabs within a box -->
    <ul class="nav nav-tabs pull-right">
        <li class="active"><a href="#revenue-chart" data-toggle="tab">Area</a></li>
        <li><a href="#sales-chart" data-toggle="tab">Donut</a></li>
        <li class="pull-left header"><i class="fa fa-inbox"></i> Main Panel</li>
    </ul>
    <div class="tab-content no-padding">
        <!-- Morris chart - Sales -->
        <div class="chart tab-pane active" id="revenue-chart" style="position: relative; height: 300px;"></div>
        <div class="chart tab-pane" id="sales-chart" style="position: relative; height: 300px;"></div>
    </div>
    <ul class="nav nav-tabs pull-right">
        <li>
            <button class="btn btn-default pull-right click-me" type="submit">
            <span class="glyphicon glyphicon-resize-full" aria-hidden="true"></span>
            </button>
        </li>
    </ul>
</div>

职位小组

<div class="box box-solid bg-light-blue-gradient" id="positionsPanel">
    <div class="box-header">
        <!-- tools box -->
        <div class="pull-right box-tools">
            <button type="button" class="btn btn-primary btn-sm daterange pull-right" data-toggle="tooltip" title="Date range">
            <i class="fa fa-calendar"></i></button>
            <button type="button" class="btn btn-primary btn-sm pull-right" data-widget="collapse" data-toggle="tooltip" title="Collapse" style="margin-right: 5px;">
            <i class="fa fa-minus"></i></button>
        </div>
        <!-- /. tools -->
        <i class="fa fa-map-marker"></i>
        <h3 class="box-title">
        Positions Panel
        </h3>
    </div>
    <div class="box-body">
        <div id="world-map" style="height: 250px; width: 100%;"></div>
    </div>
    <!-- /.box-body-->
    <div class="box-footer no-border">
        <div class="row">
            <div class="col-xs-4 text-center" style="border-right: 1px solid #f4f4f4">
                <div id="sparkline-1"></div>
                <div class="knob-label">Visitors</div>
            </div>
            <!-- ./col -->
            <div class="col-xs-4 text-center" style="border-right: 1px solid #f4f4f4">
                <div id="sparkline-2"></div>
                <div class="knob-label">Online</div>
            </div>
            <!-- ./col -->
            <div class="col-xs-4 text-center">
                <div id="sparkline-3"></div>
                <div class="knob-label">Exists</div>
            </div>
            <!-- ./col -->
        </div>
        <!-- /.row -->
    </div>
</div>

到目前为止我尝试了什么：

// Making function calls
$(".click-me").click(function () {
    // $(this).removeClass('.click-me');
    $('#positionsPanel').addClass('.click-me');
    $("#mainPanel").swap($("#positionsPanel"));
});

非常感谢任何帮助。

jQuery：onClick交换div位置和更改类

0 个答案: