0

我正在为我的项目使用引导程序。

这是我设计布局所遵循的结构-

<div class="row-fluid">
<div class="expand-this">
<div class="span8">
<div class="row-fluid">
<div class="span6 pull-left">
<b>Display Name</b>
</div>
<div class="span6 pull-right">
<input type="text"/>
</div>
</div>
</div>
</div>
<div class="hide-accordion">
<div class="span4">
<div class="block">
...some information..
</div>
</div>
</div>
<button class="button-hiding"></button>

在这里你可以看到我连续对齐两个块。row-fluid使用span4动态值的第二个跨度。所以我试图用按钮隐藏它。

jQuery-

$('.hide-accordion').hide();
$(function () {
    $('.button-hiding').click(function () {
        $('.hide-accordion').toggle(this);
    });
});

这就是工作正常。我在窗口加载时隐藏了这个手风琴。

我想要的是-

当手风琴被隐藏时，我希望 span8 采用全宽，span12一旦我点击按钮，手风琴就会出现。那么它应该采用原始span8宽度。

我也用 jQuery 试过这个-

$('.hide-accordion').hide();
$(function () {
    $('.button-hiding').click(function () {
        $('.hide-accordion').toggle(this);
        $('.Expand-this>div .span8').removeClass('span8');
        $(this).addClass('span12');
    });
});

但没有运气，救命？

4

1 回答 1

1

试试这个，

HTML:-

 <div class="row-fluid">
    <div class="span8 expand-this">
        <div class="row-fluid">
            <div class="span6 pull-left">
                <b>Display Name</b>
            </div>
            <div class="span6 pull-right">
                <input type="text"/>
            </div>
        </div>
    </div>
    <div class="span4 hide-accordion">
        <div class="block">
            ...some information..
        </div>
    </div>
<div>
<button class="button-hiding"></button>

和jQuery： -

$(function () {
    $('.hide-accordion').hide();
    $(".expand-this").removeClass("span8").addClass("span12")
    $('.button-hiding').click(function () {
        if($(".expand-this").hasClass('span8')){
            $(".expand-this").removeClass("span8").addClass("span12")
        }else{
            $(".expand-this").removeClass("span12").addClass("span8")
        }
        $('.hide-accordion').toggle();
    });
});
于 2013-04-19T07:20:49.360 回答