Question

我正在为我的项目使用bootstrap。

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

<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的{{1}}中的第二个跨度正在采用动态值。所以我试图用按钮隐藏它。

的jQuery -

span4

这是正常工作的。我在窗户装载时隐藏了这个手风琴。

我想要什么 -

当手风琴被隐藏时，我希望span8使用$('.hide-accordion').hide(); $(function () { $('.button-hiding').click(function () { $('.hide-accordion').toggle(this); }); });获取全宽，只要我点击按钮，就会出现手风琴。那么它应该采用原始的span12宽度。

我也用jQuery尝试过这个 -

span8

但没有运气，有帮助吗？

Answer 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();
    });
});

Twitter引导程序：单击按钮时展开span12

1 个答案: