我正在遍历类别/子类别,并将它们放置在手风琴折叠中,用户可以在其中单击类别名称,然后子类别将在下面显示并且可单击。到目前为止,一切正常,如下面的图片所示。现在,我试图在页面中间的三列网格中显示类别/子类别。.但是由于某种原因,我无法正确显示它,请参见下图。关于如何实现这一点的任何想法?
$('.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>
答案 0 :(得分:2)
您的问题尚不清楚,但是您可以使用不同的方法让循环使用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