2

ブラウザーをタブレットまたは電話のサイズ (< 767px 幅) に縮小する場合を除いて、ナビゲーションバーに完全に機能するブートストラップ ドロップダウンがあります。navbar のコードは次のとおりです。

<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()

ドロップダウンは、より大きなサイズ (> 767px) では問題なく機能しますが、画面がそのサイズを下回ると、ドロップダウンは表示されなくなります。画面のサイズを大きくしたり小さくしたりすると、ドロップダウンが 767 ピクセルの幅を通過するときに、それぞれ戻ったり消えたりします。

これを修正する方法を知っている人はいますか？ブートストラップの JavaScript に何かあるようですが、何がわかりません。

4

1 に答える 1

0

何らかの理由で、"dropdown-toggle" および "dropdown-menu" div を class="dropdown" で別の 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 に答える