使用引導程序水平切換按鈕

Question

我正在嘗試獲取一個按鈕來水平展開/折疊其他元素（共享按鈕）並使用引導框架內聯

我在兩件事上失敗了：

1. 該按鈕不會內聯展開其他元素，也不會在實際的 + 按鈕之后展開
2. 當它向后折疊時，其中的元素會斷開線條並堆疊在一起

我准備了一個小提琴：

http://jsfiddle.net/g7qCZ/

這是我的 html 代碼：

<button type="button" class="btn btn-primary btn-sm" 
        data-toggle="collapse" data-target="#demo">+</button>
<div id="demo" class="collapse in width" style="background-color:yellow;">
    <div style="padding: 0; overflow:hidden;">
        <button class="btn btn-default btn-xs" type="button">
            <span class="glyphicon glyphicon-star"></span> Star
        </button>
        <button class="btn btn-default btn-xs" type="button">
            <span class="glyphicon glyphicon-star"></span> Star
        </button>
        <button class="btn btn-default btn-xs" type="button">
            <span class="glyphicon glyphicon-star"></span> Star
        </button>
        <button class="btn btn-default btn-xs" type="button">
            <span class="glyphicon glyphicon-star"></span> Star
        </button>
    </div>
</div>

還有我的 css：

#demo.width {
    height: auto;
    -webkit-transition: width 0.35s ease;
    -moz-transition: width 0.35s ease;
    -o-transition: width 0.35s ease;
    transition: width 0.35s ease;
}

Answer 1

1）按鈕不會在內聯和實際+按鈕之后展開其他元素

那是因為'其他元素'嵌套在div元素中。 Div是塊級元素，默認為display: block 。 如果您希望div內容與加號按鈕顯示在同一行，則必須覆蓋它以display: inline-block 。

2）當它向后折疊時，它中的元素會斷開線並堆疊在一起

溢出是瀏覽器的最后手段。 當有更好的替代品並且通常包裝是更好的替代品時，它寧願不會。 因此瀏覽器將首先嘗試包裝元素。 只有一次它不能再使用overflow: hidden隱藏元素。 為了告訴瀏覽器不要換行，你可以使用white-space: nowrap;

---

該怎么做：

Bootstrap崩潰最適合垂直折疊。 為了橫向折疊，你必須做一些工作。 您可以使用jQuery動畫來切換width屬性。 但是，這將減少JavaScript中的寬度，這比直接的CSS3過渡更低。

這是另一種方法。 構建能夠觸發類的數據切換in 。 然后默認情況下將控件設置為零寬度，並in應用時將其設置為全寬：

<button type="button" class="btn btn-primary btn-sm" 
        data-toggle="toggle" data-target="#demo">+</button>

$("[data-toggle='toggle']").click(function() {
    var selector = $(this).data("target");
    $(selector).toggleClass('in');
});

#demo {
    width: 0px;
}
#demo.in {
    width: 220px;
}

然后你可以在你的demo div上設置其余的樣式：

#demo {
    -webkit-transition: width 2s ease;
    -moz-transition: width 2s ease;
    -o-transition: width 2s ease;
    transition: width 2s ease;

    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    background: yellow;
    vertical-align: middle;
    line-height: 30px;
    height: 30px;
}

這是一個小提琴的工作演示

Answer 2

@KyleMit的答案效果很好。 我認為你應該使用white-space: nowrap; 並display: inline-block （或float:left ）來解決您的問題。

您可以在#demo上應用上述兩個屬性：

#demo {
    display: inline-block;
    white-space: nowrap; 
}

對於其他一切，您只能使用Bootstrap代碼 ，不需要jQuery動畫 。 需要一些Bootstrap修復程序，請參閱https://github.com/twbs/bootstrap/pull/15104,Bootstrap 3.0水平折疊 - 在Chrome中彈跳 。

演示： http ： //jsfiddle.net/1agh7kaf/1/

Answer 3

自 5.1 Bootstrap 支持.collapse-horizontal