按钮切换水平与引导程序

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.display: inline-block如果您希望div内容与加号按钮显示在同一行,则必须覆盖此选项.

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;
}

这是一个小提琴的工作演示