1

ブートストラップの折りたたみ機能をレールのループで動作させようとしています。現在、ループ内の最初のアイテムのみが機能しますが、2 番目のアイテムをクリックすると、最初のアイテムが折りたたまれます。以下は私のコードです。これを動的にする最良の方法は何ですか?

<div class="accordion" id="accordion2">
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
        <h3><%= i.firstname %><%= i.lastname %></h3>
      </a>
    </div>
    <div id="collapseOne" class="accordion-body collapse in">
      <div class="accordion-inner">
    <%= i.email %></br>
        Payed: <%= i.payed? %></br>
        Birthday: <%= i.dateofbirth %><br />
        Address: <%= i.address %><br />
        City: <%= i.city %><br />
        Province: <%= i.province %><br />
        Phone Number: <%= i.phonenumber %><br />
        Service Provider: <%= i.serviceprovider %><br />
        Gender: <%= i.gender %><br />
        Languages: <%= i.languages %><br />

        <h3>School Information</h3>
        Highschool: <%= i.app.highschool %><br />
        Address: <%= i.app.highschool_address %><br />
        City: <%= i.app.highschool_city %><br />
        Province: <%= i.app.highschool_province %><br />
        Postal Code: <%= i.app.highschool_postalcode %><br />

        <h4>Post Secondary Schools of Interest</h4>
        <% i.app.postsecondaries.each do |ps| %>
        Post Secondary Name: <%= ps.postsecondary %><br />
        Address: <%= ps.postsecondary_address %><br />
        City: <%= ps.postsecondary_city %><br />
        Province: <%= ps.postsecondary_province %><br />
        Postal Code: <%= ps.postsecondary_postalcode %><br />
        Country: <%= ps.postsecondary_country %><br />
        Program: <%= ps.postsecondary_program %><br />
        Faculty: <%= ps.postsecondary_faculty %><br />
        Status: <%= ps.postsecondary_status %><br />
        <% end %>
        </div>


        <div class="span3 well">
        <h3>Grades</h3>
        <% i.app.grades.each do |grade| %>
        <br />Course: <%= grade.course %><br />
        Grade: <%= grade.course_grade %>
        <% end %>
        </div>

        <div class="span3 well">

        <h3>Extracurricular Activities</h3>
        <% i.app.extra_activities.each do |e| %>
        Activity: <%= e.activity %><br />
        Position: <%= e.activity_position %><br />
        Dates: <%= e.activity_dates %><br />
        Times Per Week: <%= e.activity_timeperweek %><br />
        Contact Name: <%= e.activity_contact %><br />
        Contact Position: <%= e.activity_contact_position %><br />
        Contact Phone Number: <%= e.activity_contact_phonenumber %><br />
        Contact Email: <%= e.activity_contact_email %><br />
        Description: <%= e.activity_description %>
        <% end %>

        <h3>Essay 1</h3>
        Describe the situation: <%= i.app.describe_situation %></br>
        </br>Explain the actions you took in response to the situation: <%= i.app.explain_action %></br>
        </br>Identify the good that resulted once the situation was resolved: <%= i.app.resolved_situation %></br>
        </br>What personal strength or skill did you use that was key in determining the outcome?: <%= i.app.personal_skill %></br>

        <h3>Essay 2</h3>
        Describe the situation: <%= i.app.describe_situation_two %></br>
        </br>Explain the actions you took in response to the situation: <%= i.app.explain_action_two %></br>
        </br>Identify the good that resulted once the situation was resolved: <%= i.app.resolved_situation_two %></br>
        </br>What personal strength or skill did you use that was key in determining the outcome?: <%= i.app.personal_skill_two %></br>

        <h3>Essay 3</h3>
        Describe the situation: <%= i.app.describe_situation_three %></br>
        </br>Explain the actions you took in response to the situation: <%= i.app.explain_action_three %></br>
        </br>Identify the good that resulted once the situation was resolved: <%= i.app.resolved_situation_three %></br>
        </br>What personal strength or skill did you use that was key in determining the outcome?: <%= i.app.personal_skill_three %></br>
        </div>
      </div>
    </div>
  </div>

  <% end %>
4

3 に答える 3

5

アコーディオン要素のIDがループ内で変化していないことが起こっていると思います。したがって、同じ ID を持つ複数の要素があります。これにより、それらのいずれかをクリックすると、最初の ID がデフォルトになります (javascript は最初に見つけた ID を選択します)。Ruby のeach_with_index( docs ) 関数を使用して、適切なクラスをアコーディオンに追加することをお勧めします。

あれは

<% collection_of_users.each_with_index do |i, index| %>
  ...
  <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapse<%= index.to_s %>">
  ...
  <div id="collapse<&= index.to_s %>" class="accordion-body collapse in">
<% end %>

本文の各折りたたみ部分を指すリンクも変更する必要があることに注意してください。to_sまた、埋め込まれたルビーに が必要であると100% 確信しているわけではありませんが、念のために言っておきます。

于 2013-09-26T03:41:36.103 に答える
4

これは、あなたの問題に対するより正確な解決策になると思います。

      <ul>
      <div class="panel-group" id="accordion">
      <% collection_of_users.each_with_index do |i, index| %>
          <div class="panel panel-default">
            <div class="panel-heading">
              <h4 class="panel-title">
                <li><a data-toggle="collapse" data-parent="#accordion" href="#collapse<%= index+1 %>">
                  <%= i_title.capitalize %>
                </a></li>
              </h4>
            </div>
            <div id="collapse<%= index+1 %>" class="panel-collapse collapse">
              <div class="panel-body">
                ............................
              </div>
            </div>
          </div>
        <% end %>
      </div>
      </ul>
于 2014-05-28T10:52:25.750 に答える