1

我正在尝试让引导折叠功能与 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 %>
4

3 回答 3

5

我认为正在发生的事情是手风琴元素的 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嵌入式 ruby​​ 中是否有必要，但最好是安全的。

于 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 回答
0

使用引导程序 4：

<% [1, 2, 3].each do |a| %>
  <div class="accordion" id="accordion<%= a %>">
    <div class="card">
      <div class="card-header" id="heading<%= a %>">
        <h2 class="mb-0">
          <button aria-controls="collapse<%= a %>" aria-expanded="true" class="btn btn-link btn-block text-left" data-target="#collapse<%= a %>" data-toggle="collapse" type="button">
            Collapsible Group Item #1
          </button>
        </h2>
      </div>
      <div aria-labelledby="headingOne" class="collapse" data-parent="#accordion<%= a %>" id="collapse<%= a %>">
        <div class="card-body">
          <%= a %>
        </div>
      </div>
    </div>
  </div>
<% end %>
于 2021-09-08T10:49:00.390 回答