Question

我正在使用带有Panels的Bootstrap 3.

我每行有4列“<div class="col-md-3 col-sm-3 col-xs-6">”。在标题内，每个面板上有3个链接，即12 | 6 | 3。

如果我点击标题中的12，此面板应该延伸到 100％ width ..表示此面板应变为“<div class="col-md-12 col-sm-12 col-xs-12">”，其他3个面板将为“<div class="col-md-4 col-sm-4 col-xs-4">”
如果我点击标题中的6，此面板应该延伸到 50％ width ..表示此面板应变为“<div class="col-md-6 col-sm-6 col-xs-6">”，其他3个面板将为“<div class="col-md-2 col-sm-2 col-xs-2">”
如果我点击标题中的3，则此面板应延伸至 25％ width ..表示所有4个面板都应变为“<div class="col-md-3 col-sm-3 col-xs-3">”

FIDDLE

HTML

<!-- Container -->
<div class="container-fluid">

    <!-- Row -->
    <div class="row">

        <!-- Column 1 -->
        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-6">

            <!-- Panel 1 -->
            <div class="panel panel-default">

                <!-- Panel Heading -->
                <div class="panel-heading">

                    <h3 class="panel-title">Panel 1</h3> <!-- Heading -->

                    <!-- Settings -->
                    <div class="pt-right">
                        <a href="#" class="full-width">12</a><a href="#" class="half-width">6</a><a href="#" class="custom-width" class="active">3</a>
                    </div>
                    <!-- /Settings -->

                </div>
                <!-- /Panel Heading -->

                <div class="panel-body">Panel 1 Content</div> <!-- Panel Content -->

            </div>
            <!-- /Panel 1 -->

        </div>
        <!-- /Column 1 -->

        <!-- Column 2 -->
        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-6">

            <!-- Panel 2 -->
            <div class="panel panel-default">

                <!-- Panel Heading -->
                <div class="panel-heading">

                    <h3 class="panel-title">Panel 2</h3> <!-- Heading -->

                    <!-- Settings -->
                    <div class="pt-right">
                        <a href="#" class="full-width">12</a><a href="#" class="half-width">6</a><a href="#" class="custom-width" class="active">3</a>
                    </div>
                    <!-- /Settings -->

                </div>
                <!-- /Panel Heading -->

                <div class="panel-body">Panel 2 Content</div> <!-- Panel Content -->

            </div>
            <!-- /Panel 2 -->

        </div>
        <!-- /Column 2 -->

        <!-- Column 3 -->
        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-6">

            <!-- Panel 3 -->
            <div class="panel panel-default">

                <!-- Panel Heading -->
                <div class="panel-heading">

                    <h3 class="panel-title">Panel 3</h3> <!-- Heading -->

                    <!-- Settings -->
                    <div class="pt-right">
                        <a href="#" class="full-width">12</a><a href="#" class="half-width">6</a><a href="#" class="custom-width" class="active">3</a>
                    </div>
                    <!-- /Settings -->

                </div>
                <!-- /Panel Heading -->

                <div class="panel-body">Panel 3 Content</div> <!-- Panel Content -->

            </div>
            <!-- /Panel 3 -->

        </div>
        <!-- /Column 3 -->

        <!-- Column 4 -->
        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-6">

            <!-- Panel 4 -->
            <div class="panel panel-default">

                <!-- Panel Heading -->
                <div class="panel-heading">

                    <h3 class="panel-title">Panel 4</h3> <!-- Heading -->

                    <!-- Settings -->
                    <div class="pt-right">
                        <a href="#" class="full-width">12</a><a href="#" class="half-width">6</a><a href="#" class="custom-width" class="active">3</a>
                    </div>
                    <!-- /Settings -->

                </div>
                <!-- /Panel Heading -->

                <div class="panel-body">Panel 4 Content</div> <!-- Panel Content -->

            </div>
            <!-- /Panel 4 -->

        </div>
        <!-- /Column 4 -->

    </div>
    <!-- /Row -->

</div>
<!-- /Container -->

jQuery（尝试下面的代码，但无法正确使用）

$('.full-width').click(function() {
    $(this).closest('[class^="col-md"], [class^="col-sm"], [class^="col-xs"]').removeClass('col-md-3 col-sm-3 col-xs-6').addClass('col-md-12 col-sm-12 col-xs-12');
});

Answer 1

简单演示，试试：

$('div.pt-right a').click(function(e){
    e.preventDefault();
    var size = $(this).text();
    var pclass, oclass;
    if (size == 12) {
        pclass = 'col-lg-12 col-md-12 col-sm-12 col-xs-12';
        oclass = 'col-lg-4 col-md-4 col-sm-4 col-xs-4';
    }
    if (size == 6) {
        pclass = 'col-lg-6 col-md-6 col-sm-6 col-xs-6';
        oclass = 'col-lg-2 col-md-2 col-sm-2 col-xs-2';
    }
    if (size == 3) {
        pclass = oclass = 'col-lg-3 col-md-3 col-sm-3 col-xs-3';
    }
    var spanel = $(this).parents('div.panel').parent()
    spanel.removeClass().addClass(pclass);
    $('.panel').parent().not(spanel).removeClass().addClass(oclass);
});

DEMO

Bootstrap列大小使用jQuery Clickable进行切换

FIDDLE

1 个答案: