javascript - 为什么这个 Bootstrap 2.3.2 下拉菜单不起作用？

Question

我的网站上有一个包含 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> &#8226 </li>
        <li><%= link_to 'About College', '/about-college/college-life/1' %></li> 
        <li> &#8226 </li>
        <li><%= link_to 'Advice', '/advice' %></li>
        <li> &#8226 </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> &#8226 </li>
            <li><%= link_to 'About College', '/about-college/college-life/1' %></li> 
            <li> &#8226 </li>
            <li><%= link_to 'Advice', '/advice' %></li>
            <li> &#8226 </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>

Answer 1

您的 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

的子级

http://www.bootply.com/120623