[英]twitter bootstrap collapse first item & open second item on load
我第一次使用twitter boostrap并使用可折叠手风琴。
页面加载时,默认情况下打开第一个项目,其余项目全部折叠。
我想要打开第二个项目,并在页面加载时默认折叠第一个项目和剩余项目。
有没有一种简单的方法来实现这一目标? 我试过玩data-toggle
属性但是没有到达任何地方。
<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">
Name & Location
</a>
</div>
<div id="collapseOne" class="accordion-body collapse in">
<div class="accordion-inner">
<%= f.input :name %> <br/>
<%= f.input :addr_1, label: 'Address' %> <br/>
<%= f.input :addr_2, label: false %> <br/>
<%= f.input :addr_3, label: false, placeholder: "County, State, Provence, Region etc" %> <br/>
<%= f.input :country, label: false, :priority => [ "Ireland", "United Kingdom" ] %> <br/>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
Description
</a>
</div>
<div id="collapseTwo" class="accordion-body collapse">
<div class="accordion-inner">
<%= f.input :description, :input_html => { :cols => 10, :rows => 3 } %> <br/>
<%= f.input :looped, :as => :boolean %>
<%= f.input :duration_hours, :label => 'Duration', :collection => 0..12, :include_blank => false, :hint => "hours" %>
<%= f.input :duration_mins, collection: [ 0, 15, 30, 45 ], :include_blank => false, label: false, :hint => "mins" %>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">
Images
</a>
</div>
<div id="collapseThree" class="accordion-body collapse">
<div class="accordion-inner">
<%= f.simple_fields_for :photos do |builder| %>
<%= render 'photo_fields', f: builder %>
<% end %>
<div style=clear:both;> </div>
<%= link_to_add_fields "Add More", f, :photos %>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseFour">
Route
</a>
</div>
<div id="collapseFour" class="accordion-body collapse">
<div class="accordion-inner">
<%= f.simple_fields_for :routes do |builder| %>
<%= render 'route_fields', f: builder %>
<% end %>
<%= link_to_add_fields "Add Step", f, :routes %>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseFive">
Directions
</a>
</div>
<div id="collapseFive" class="accordion-body collapse">
<div class="accordion-inner">
<%= f.simple_fields_for :directions do |builder| %>
<%= render 'direction_fields', f: builder %>
<% end %>
<%= link_to_add_fields "Add More Directions", f, :directions %>
</div>
</div>
</div>
</div>
Bootstrap使用in
类来确定默认情况下打开的项目(不仅仅是在accordian功能上),因此您可以将该类移动到#collapseTwo
div,默认情况下它将打开。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.