3

ブートストラップ折りたたみ機能について質問があります。私はかなり明白な、または修正しやすいものを見落としていると確信していますが、私はそれをたくさんグーグルで検索し、コードで遊んでいましたが、成功しませんでした。

「アカウント設定」ページがあり、ユーザーのすべてのアカウント情報がテーブルのような形式で表示され、最後のテーブル列のテーブルセルには常にその情報を編集するための「編集」ボタンが含まれています。ユーザーが[編集]をクリックすると、編集フォームがそのテーブル行のすぐ下に展開されます。

http://twitter.github.com/bootstrap/javascript.html#collapseのスキームに従いました。折りたたみ関数自体は正常に機能しますが、問題は、クリックした編集ボタンに関係なく、各フォームが常にテーブルの上に展開されることです。の上。私はそれがどのように見えるかのスクリーンショットを作りました。http://imageshack.us/photo/my-images/834/problemyn.png/テーブル全体の上に表示するのではなく、特定の行のすぐ下に展開して、下の行を押し下げます。

ここに私のコード：

<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>
4

2 に答える 2

5

テーブルの行を折りたたむには、折りたたまれた行に追加の css を記述する必要があります。

table .collapse.in {
    display: table-row !important;
}

行が展開された後の表示の問題を修正します。

于 2014-02-21T15:56:20.507 に答える
4

こんにちは、満足のいく答えが得られず申し訳ありません。<tr>の子孫として要素以外のものを持つことは許可されていない<tbody>ため、HTML は無効です。これがグリッチ動作の原因です。最善の策は、フォームのすべての部分を新しいtable要素でラップすることです。

于 2012-05-30T13:21:24.163 に答える