Javascript 为什么不是';引导程序2.3.2下拉菜单是否正常工作?

Javascript 为什么不是';引导程序2.3.2下拉菜单是否正常工作?,javascript,jquery,css,twitter-bootstrap,twitter-bootstrap-2,Javascript,Jquery,Css,Twitter Bootstrap,Twitter Bootstrap 2,我的网站上有一个导航栏,有4个元素。前三个是链接,我希望第四个是链接的下拉菜单。我一直在读,似乎不明白。下面是正在发生的事情的简要说明 这是我的代码: application.html.erb <nav id="main_nav"> <div id="logo"><%= link_to image_tag('logo.jpg', size: "40x40", alt: "College Inside View"), '/' %></div>

我的网站上有一个导航栏,有4个元素。前三个是链接,我希望第四个是链接的下拉菜单。我一直在读,似乎不明白。下面是正在发生的事情的简要说明

这是我的代码:

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>

您的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
的直接子女。请参见将您的第二级
ul
作为
li


发布您的完整相关js。不确定这是否是您的问题,但我在响应2.3.2下拉列表中遇到了一个问题,看起来很相似。我在SO上找到了此修复:$('.dropdown toggle')。单击(函数(e){e.preventDefault();setTimeout($.proxy(函数(){if('ontouchstart'在document.documentElement中){$(this).兄弟('.dropdown background').off().remove();},this),0;});这可能是因为您没有正确处理子菜单:请解释您期望的是什么,以及行为与您得到的行为有何不同。导航栏应该是这样的,当您单击“工具”时,下拉菜单应该显示在“工具”下面,并且应该是这样的。那么问题在于样式设置?或者你是说下拉菜单不起作用?创建一个页面的链接,这样我们就可以很容易地调试,你就会得到一些答案。让我们
<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>