Question

我正在遍历类别/子类别，并将它们放置在手风琴折叠中，用户可以在其中单击类别名称，然后子类别将在下面显示并且可单击。到目前为止，一切正常，如下面的图片所示。现在，我试图在页面中间的三列网格中显示类别/子类别。.但是由于某种原因，我无法正确显示它，请参见下图。关于如何实现这一点的任何想法？

$('.toggle').click(function(e) {
        e.preventDefault();

        var $this = $(this);

        if ($this.next().hasClass('show')) {
            $this.next().removeClass('show');
            $this.next().slideUp(350);
        } else {
            $this.parent().parent().find('li .inner').removeClass('show');
            $this.parent().parent().find('li .inner').slideUp(350);
            $this.next().toggleClass('show');
            $this.next().slideToggle(350);
        }
    });

ul {
  list-style: none;
  padding: 0;
  text-decoration: underline;

  .inner {
    padding-left: 1em;
    //overflow: hidden;
    display: none;

    &.show {
      /*display: block;*/
    }
  }

  li {
    margin: .5em 0;

    a.toggle {
      width: 100%;
      font-weight: bold;
      display: inline-block;
      color: #3c3d3d;
      padding: 1.2em;

      &:hover {
        color: #c7c9c9;
      }
    }
  }
}

.category-select:hover {color: #c7c9c9;}
.category-select {color: #787979;}

<div class="container-fluid">
      <div class="row">
        <div class="col-md-8 offset-md-1">
        <%= form_tag (search_url), :method => "get", id: "search-form" do %>
          <div class="row">
            <div class="col-md-4">
              <ul class="accordion">
              <li>
              <% @categories.each do |category| %>
              <a class="toggle" href="javascript:void(0);" style="text-decoration: none; text-align: center;"><%= category.name.capitalize %></a>
              <% unless category.children.empty? %>
              <ul class="inner" style="text-align: center;">
                <% category.children.each do |subcategory| %>           
                    <li><label class="category-select" style="cursor: pointer;">
                      <span style="display: none;"><%= check_box_tag :search, subcategory.id %></span>
                      <%= subcategory.name.capitalize %>
                    </label></li>      
                <% end %>
              </ul>
            <%end%>
            <%end%>
            <%= submit_tag '', :style => "display: none;" %>
         <% end %>
           </li>
          </ul>
        </div>
        </div>
       </div>
    </div>
    </div>

Answer 1

您的问题尚不清楚，但是您可以使用不同的方法让循环使用3列。另外，由于我无法获得问题，我不确定它是否会与您一起使用也许正确

但是您可以尝试：

<div class="row">  ---> Optional
  <% @some_items.in_groups_of(3) do |group| %>
    <div class="row">
      <% group.each do |item| %>
        <div class="col-md-4">
          <%= item.name %>
        </div>
      <% end %>
    </div>
  <% end %>
</div>   ---> Optional

设置三列的Bootstrap网格

1 个答案: