2

我在导航栏中有一个运行良好的引导下拉菜单，除非我将浏览器缩小为平板电脑或手机大小（< 767px 宽）。导航栏的代码是：

<div class="navbar navbar-fixed-top">
 <div class="navbar-inner">
  <div class="container-fluid">

   <a href="<%= root_url %>" class="brand brandtag"></a>
   <a class="btn btn-navbar visible-phone" data-toggle="collapse" data-target=".nav-collapse">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
   </a>

  <div class="pull-right"> # DROPDOWN THAT WORKS SPORADICALLY
   <div id="user-nav">
    <div class="not-logged-in">
     <a class="dropdown-toggle btn btn-inverse" href="<%= new_user_session_path %>" data-toggle="dropdown">
      Login <span class='caret'></span>
     </a>
     <div class="dropdown-menu">
      <%= render "devise/sessions/new_from_dropdown" %>
     </div>
    </div>
   </div>
  </div>

  <div class="nav-collapse">
    <ul class="nav">
      <li class="active"><a>Link 1</a></li>
      <li class="active"><a>Link 2</a></li>
      <li class="active"><a>Link 3</a></li>
      <li class="active"><a>Link 4</a></li>
    </ul>
  </div><!--/.nav-collapse -->
</div>

我的javascript很简单：

jQuery ->
  $(".dropdown-toggle").attr("href", "#").dropdown()
  $('.dropdown-menu form label.hide').hide()
  $('.dropdown-menu input, .dropdown-menu label').on 'click', (e) ->
    e.stopPropagation()

下拉菜单在较大尺寸（> 767 像素）下工作得非常好，但是一旦屏幕下降到该尺寸以下，下拉菜单就会停止显示。我可以将屏幕大小调整为更大或更小，下拉菜单会在通过 767px 宽度时分别返回或消失。

有谁知道如何解决这一问题？似乎是引导程序的 javascript 中的东西，但我不知道是什么。

4

1 回答 1

0

出于某种原因，使用 class="dropdown" 将“dropdown-toggle”和“dropdown-menu”div 包装在另一个 div 中可以解决此问题。因此，上面的代码只需进行很小的更改即可：

<div class="pull-right"> # DROPDOWN THAT WORKS SPORADICALLY
 <div id="user-nav">
  <div class="dropdown not-logged-in"> # <-- "dropdown" class added
   <a class="dropdown-toggle btn btn-inverse" href="<%= new_user_session_path %>" data-toggle="dropdown">
    Login <span class='caret'></span>
   </a>
   <div class="dropdown-menu">
    <%= render "devise/sessions/new_from_dropdown" %>
   </div>
  </div>
 </div>

我不知道为什么这只会影响手机和平板电脑的尺寸，但这就是使用他人框架的陷阱！

于 2012-08-29T05:01:14.973 回答