javascript - 使用 Bootstrap 水平切换按钮

Question

我正在尝试获取一个按钮来水平展开/折叠其他元素(共享按钮)并使用引导框架内联

我在两件事上失败了:

1. 该按钮不会展开内联的其他元素，也不会在实际的 + 按钮之后展开
2. 当它向后折叠时，其中的元素会打断一行并相互堆叠

我准备了一个 fiddle :

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) The button doesn't expand the other elements inline and after the actual + button

那是因为“其他元素”嵌套在 div 元素中。 Div 是 block 级元素，默认为 display: block。如果您希望 div 内容与加号按钮显示在同一行，则必须将其覆盖为 display: inline-block。

2) When it collapse back the elements in it breaks the line and stack on top of each other

溢出是浏览器的最后手段。当有更好的选择并且通常包装是更好的选择时，它宁愿不这样做。所以浏览器会首先尝试包装元素。只有当它不能再使用时，它才会使用 overflow: hidden 来隐藏元素。为了告诉浏览器不要换行，可以使用white-space: nowrap;

---

改为做什么:

Bootstrap collapse最适合垂直折叠。为了水平折叠，您需要做一些工作。您可以使用 jQuery animate切换宽度属性。但是，这会减少 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;
}

然后您可以在演示 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;
}

Here's a working demo in fiddle