表内/表行之间的 Bootstrap 折叠不起作用 [英] Bootstrap collapse within table/between table rows not working

问题描述

我有一个关于 Bootstrap 折叠功能的问题.我很确定我忽略了一些非常明显或易于修复的东西，但我在谷歌上搜索了很多并使用了代码，但没有成功.

我有一个帐户设置"页面，其中用户的所有帐户信息都以类似表格的格式显示，最后一个表格列的表格单元格始终包含一个编辑"按钮来编辑该信息.当人们单击编辑"时，编辑表单将在该表格行下方展开.

我遵循了 http://twitter.github.com/bootstrap/上的计划javascript.html#collapse ，折叠功能本身工作正常，但问题是每个表单总是在我的表格上方展开，无论我单击哪个编辑按钮.我截图了它的样子.http://imageshack.us/photo/my-images/834/problemyn.png/ 而不是在整个表格上方，我希望它扩展到特定行的下方，将较低的行向下推.

这是我的代码:

<tr><td>用户名</td><td><%=@user.name %></td><td><button class="btn btn-danger" data-toggle="collapse" data-target="#username">编辑</button></td></tr><div id="用户名" class="折叠"><div class="row"><div class="span6 offset3"><%= form_for(@user) do |form|％＞<%= render 'shared/error_messages', object: form.object %><%= form.label :name, "更改用户名" %><%= form.text_field :name %><%= form.submit "Save changes", class: "btn btn-primary" %><%结束%>
<tr><td>电子邮件</td><td><%=@user.email %></td><td><button class="btn btn-danger" data-toggle="collapse" data-target="#email">编辑</button></td></tr><div id="email" class="折叠"><div class="row"><div class="span6 offset3"><%= form_for(@user) do |form|％＞<%= render 'shared/error_messages', object: form.object %><%= form.label :email, "更改邮箱" %><%= form.text_field :email %><%= form.submit "Save changes", class: "btn btn-primary" %><%结束%>
<tr><td>密码</td><td>上次更新时间:<%= @user.updated_at %></td><td><button class="btn btn-danger" data-toggle="collapse" data-target="#password">编辑</button></td></tr><div id="密码" class="折叠"><div class="row"><div class="span6 offset3"><%= form_for(@user) do |form|％＞<%= render 'shared/error_messages', object: form.object %><%= form.label :password, "更改密码" %><%= form.text_field :密码%><%= form.label :password_confirmation, "确认密码" %><%= form.password_field :password_confirmation %><%= form.submit "Save changes", class: "btn btn-primary" %><%结束%>
<tr><td>语言</td><td>英语</td><td><button class="btn btn-danger" data-toggle="collapse" data-target="#language">编辑</button></td></tr><div id="语言" class="折叠"><div class="row"><div class="span6 offset3"><!-- 语言形式的代码-->
<tr><td>头像</td><td><%= avatar_status %></td><td><button class="btn btn-danger" data-toggle="collapse" data-target="#demo">编辑</button></td></tr><div id="demo" class="折叠"><div class="row"><div class="span6 offset3"><%= form_for(@user) do |form|％＞<%= form.label :avatar %><%= form.file_field :avatar %><%= form.submit "添加头像", class: "btn btn-primary" %><%结束%>
</tbody>

解决方案

很抱歉我没有一个满意的答案.除了 元素之外，不允许有任何元素作为 的后代，因此您的 HTML 无效.这就是导致故障行为的原因.最好的办法是将表单的每个部分都包装在一个新的 table 元素中.

I have a question regarding the Bootstrap collapse feature. I'm pretty sure that I'm overlooking something quite obvious or easy to fix, but I googled it alot and played with the code, but without success.

I have a "account settings" page, where all account information of a user is shown in a table-like format, with the table cells of the last table column always containing an "edit"-button to edit that information. When people click "edit", an edit form shall expand just beneath that table row.

I followed the scheme at http://twitter.github.com/bootstrap/javascript.html#collapse , the collapse function itself works fine, but the problem is that each form always expands above my table, regardless of which edit button I click on. I made a screenshot of how it looks like. http://imageshack.us/photo/my-images/834/problemyn.png/ Instead of being above the whole table I want it to expand just beneath the specific row, pushing the lower rows down.

Here my code:

<table class="table">
<tbody>
    <tr>
        <td>Username</td>
        <td><%= @user.name %></td>
        <td><button class="btn btn-danger" data-toggle="collapse" data-target="#username">Edit</button></td>
    </tr>
    <div id="username" class="collapse">
        <div class="row">
            <div class="span6 offset3">
            <%= form_for(@user) do |form| %>
            <%= render 'shared/error_messages', object: form.object %>
                <%= form.label :name, "Change Username" %>
                <%= form.text_field :name %>
                <%= form.submit "Save changes", class: "btn btn-primary" %>
            <% end %>
            </div>
        </div>
    </div>
    <tr>
        <td>Email</td>
        <td><%= @user.email %></td>
        <td><button class="btn btn-danger" data-toggle="collapse" data-target="#email">Edit</button></td>
    </tr>
    <div id="email" class="collapse">
        <div class="row">
            <div class="span6 offset3">
            <%= form_for(@user) do |form| %>
                <%= render 'shared/error_messages', object: form.object %>
                <%= form.label :email, "Change Email" %>
                <%= form.text_field :email %>
                <%= form.submit "Save changes", class: "btn btn-primary" %>
            <% end %>
            </div>
        </div>
    </div>
    <tr>
        <td>Password</td>
        <td>Last time updated:&nbsp;<%= @user.updated_at %></td>
        <td><button class="btn btn-danger" data-toggle="collapse" data-target="#password">Edit</button></td>
    </tr>
    <div id="password" class="collapse">
        <div class="row">
            <div class="span6 offset3">
            <%= form_for(@user) do |form| %>
                <%= render 'shared/error_messages', object: form.object %>
                <%= form.label :password, "Change Password" %>
                <%= form.text_field :password %>
                <%= form.label :password_confirmation, "Confirm Password" %>
                <%= form.password_field :password_confirmation %>
                <%= form.submit "Save changes", class: "btn btn-primary" %>
            <% end %>
            </div>
        </div>
    </div>
    <tr>
        <td>Language</td>
        <td>English</td>
        <td><button class="btn btn-danger" data-toggle="collapse" data-target="#language">Edit</button></td>
    </tr>
    <div id="language" class="collapse">
        <div class="row">
            <div class="span6 offset3">
            <!-- code for language form -->
            </div>
        </div>
    </div>
    <tr>
        <td>Avatar</td>
        <td><%= avatar_status %></td>
        <td><button class="btn btn-danger" data-toggle="collapse" data-target="#demo">Edit</button></td>
    </tr>
    <div id="demo" class="collapse">
        <div class="row">
            <div class="span6 offset3">
            <%= form_for(@user) do |form| %>
            <%= form.label :avatar %>
            <%= form.file_field :avatar %>

            <%= form.submit "Add avatar", class: "btn btn-primary" %>
            <% end %>
            </div>
        </div>
    </div>
</tbody>
</table>

解决方案

Hi I'm sorry I won't have a satisfying answer. It is not allowed to have anything other than <tr> elements as descendants of <tbody> so your HTML is not valid. This is what causes the glitchy behavior. Your best bet is to wrap every part of your form in a new table element.

这篇关于表内/表行之间的 Bootstrap 折叠不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！