Question

我正在尝试使用bootstraps折叠功能来处理rails中的循环。目前只有循环中的第一个项目有效，但是当单击第二个项目时，它只会折叠第一个项目。以下是我的代码。什么是使这种动态变得更好的最佳方式？

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

Answer 1

我认为正在发生的事情是手风琴元素的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 %>

请注意，您还必须确保更改指向正文中每个折叠部分的链接。此外，我不是100％确定嵌入式红宝石中to_s是必需的，但更安全。

Answer 2

我认为这可能是你的ploberm更准确的解决方案。

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

每个循环使用rails进行Bootstrap折叠

2 个答案: