相关疑难解决方法(0)

我正在制作一个Rails应用程序,并且正在尝试实现与Twitter的Bootstrap 崩溃相关的特定功能.当我解释它时,请耐心等待.

我目前有以下观点:

单击每个按钮时,将展开其数据切换div.视图设置如下:

    <button class="btn dropdown" data-toggle="collapse" data-target="#keys"><i class="icon-chevron-right"></i> Keys <span class="badge badge-info pull-right"><%= @app.keys.count %></span></button>
    <button class="btn dropdown" data-toggle="collapse" data-target="#attrs"><i class="icon-chevron-right"></i> Attributes</button>
    <button class="btn dropdown" data-toggle="collapse" data-target="#edit"><i class="icon-chevron-right"></i> Edit Details</button>

    <div class="collapse indent" id="keys">
        <!--content-->
    </div>

    <div class="collapse indent" id="attrs">
        <!--content-->
    </div>

    <div class="collapse" id="edit">
        <!--content-->
    </div>

我有这样的设置,因为我想要按钮并排连续.如果我将按钮移动到视图正上方,它们会展开/折叠,然后按钮会叠加在一起.

所以,我的最终目标是将三个按钮并排放置,让它们折叠并展开各自的部分.然而,目前的设置工作有点尴尬.例如,如果有人展开了"键"部分,然后展开了"属性"部分,则必须在"键"部分下方滚动.

这个问题有两种可能的解决方案.一个是按下一个按钮会导致另一个按钮自行折叠.这意味着在任何给定时间,只扩展其中一个部分.

更好的解决方案,我认为是这样,当键扩展时,右边的按钮向下移动到键div的底部,当属性展开时,编辑细节按钮移动到该div的底部.这可能吗？我已经尝试通过让按钮堆叠在一起并通过css改变它们的相对位置来做到这一点,但这不起作用,因为当其中一个部分被扩展时,其他按钮最终出现在尴尬的位置扩展部分的中间部分.

最后,我想在没有twitter的引导页面上提到的手风琴风格行为的情况下尝试这样做,但是如果有人能够从设计的角度说服我更好,我肯定会重新考虑.