我的网站上有一个包含 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>
和 $('.dropdown-toggle').dropdown();
在 javascript 文件中。
我做错了什么?
编辑:我得到了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>
最佳答案
您的 HTML 结构不合理,可能不是 Bootstrap 期望的格式。
检查子菜单或下拉菜单部分,并使用此处显示的有效 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
关于javascript - 为什么这个 Bootstrap 2.3.2 下拉菜单不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22285389/