我的网站上有一个导航栏,有4个元素。前3个是链接,我希望第四个是链接的下拉菜单。我一直在阅读the Bootstrap docs,似乎无法弄明白。以下是screenshot发生的事情。
这是我的代码:
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>
和javascript文件中的$('.dropdown-toggle').dropdown();
。
我做错了什么?
修改:尝试此操作后我得到了this:
<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>
答案 0 :(得分:3)
您的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
的直接孩子。请参阅here而将第二级ul
作为li