javascript - 在 Rails 应用程序中单击更改 div 类

Question

我有一个 Rails 应用程序，它按行显示步骤和子步骤。我希望创建一个操作，点击步骤行会将其类从“step_container”更改为“step_container active”，然后显示该步骤的相应子步骤行。我很难弄清楚如何使用 AJAX(或了解这是否是最好的工具)来完成此任务。

<% @steps.each do |step| %>
      <div class="step_container"> <!-- add 'active' if clicked-->
        <div class="medium-8 columns"><!-- add 'active_container' if clicked-->
          <div class="medium-5 columns step_info">
            <div class="step_number">
              <span><%= step.order %></span>
            </div>
            <div class="custom_step">
              <span class="step_title"><%= step.title %> (custom step)</span>
              <span class="step_desc"><%= step.description %></span>
            </div>
          </div>
        </div>

        <!-- Only show this div if top div is clicked -->
        <div class="medium-4 columns sub_steps_container">
          <% @substeps.where(step_id: step.id).each do |substep| %>
                  <div class="sub_steps">
                    <div class="step_number">
                      <span><%= substep.order %></span>
                    </div>
                    <div class="">
                      <span class="step_title"><%= substep.action %></span>
                      <span class="step_desc"><%= substep.description %></span>
                    </div>
                  </div>
          <% end %>
        </div>
      </div>
  <% end %>

在此先感谢您的帮助。这花了我一天的大部分时间，但结果有限。

Answer 1

这里不需要AJAX，只需要一点javascript和css。

JavaScript:

$('.step_container').click(function() {
  $(this).addClass('active');
}

CSS(萨斯):

.step_container {
  .sub_steps_container {
    display: none;
  }

  &.active {
    .sub_steps_container {
      display: block;
    }
  }
}