[英]Why isn't this Bootstrap 2.3.2 dropdown menu working?
我的網站上有一個導航欄,有4個元素。 前3個是鏈接,我希望第四個是鏈接的下拉菜單。 我一直在閱讀Bootstrap文檔 ,似乎無法弄明白。 這是正在發生的事情的屏幕截圖 。
這是我的代碼:
application.html.erb
<nav id="main_nav">
<div id="logo"><%= link_to image_tag('logo.jpg', size: "40x40", alt: "College Inside View"), '/' %></div>
<ul>
<li><%= link_to 'Colleges', '/colleges' %></li>
<li> • </li>
<li><%= link_to 'About College', '/about-college/college-life/1' %></li>
<li> • </li>
<li><%= link_to 'Advice', '/advice' %></li>
<li> • </li>
<div class="dropdown">
<li><a href="#" class="dropdown-toggle" data-toggle="dropdown">
Tools
<b class="caret"></b>
</a></li>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li><a tabindex="-1" href="#">Action</a></li>
<li><a tabindex="-1" href="#">Another action</a></li>
<li><a tabindex="-1" href="#">Something else here</a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>
</ul>
<%= form_tag("/search", :method => 'get', :id => 'search_text', :class => 'form_search ui-autocomplete') do -%>
<%= search_field_tag :search, params[:search], :placeholder => 'enter college', :id => "search_field", :class => 'input-medium search-query ui-autocomplete' %>
<% end -%>
</nav>
和$('.dropdown-toggle').dropdown();
在javascript文件中。
我究竟做錯了什么?
編輯 :我得到這個嘗試此方法后:
<nav id="main_nav">
<div id="logo"><%= link_to image_tag('logo.jpg', size: "40x40", alt: "College Inside View"), '/' %></div>
<div class="dropdown">
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li><%= link_to 'Colleges', '/colleges' %></li>
<li> • </li>
<li><%= link_to 'About College', '/about-college/college-life/1' %></li>
<li> • </li>
<li><%= link_to 'Advice', '/advice' %></li>
<li> • </li>
<li class="dropdown-submenu">
<a tabindex="-1" href="#">More options</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Action</a></li>
<li><a tabindex="-1" href="#">Another action</a></li>
<li><a tabindex="-1" href="#">Something else here</a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div>
<%= form_tag("/search", :method => 'get', :id => 'search_text', :class => 'form_search ui-autocomplete') do -%>
<%= search_field_tag :search, params[:search], :placeholder => 'enter college', :id => "search_field", :class => 'input-medium search-query ui-autocomplete' %>
<% end -%>
</nav>
您的HTML結構不好,可能不是bootstrap期望的格式。
檢查Sub Menus或DRop Downs部分,並使用此處顯示的有效HTML
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
...
<li class="dropdown-submenu">
<a tabindex="-1" href="#">More options</a>
<ul class="dropdown-menu">
...
</ul>
</li>
</ul>
基本上你不應該把div
作為ul
的直接孩子。 見這里反而把YOUT第二級ul
作為一個孩子li
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.