Bootstrap Responsive からの折りたたみボタンの "shown" イベントが、最初は正しく起動せず、高さが "auto" に設定されていません。最初の展開後は毎回機能しますが、初めては機能しません。
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a id="collapse-btn" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#"> </a>
<div class="nav-collapse">
<ul class="nav pull-right" id="user-dropdown">
<li>
<form class="navbar-search" action="">
<input type="text" class="search-query span3" placeholder="Search">
</form>
</li>
<li class=""><a href="#"><i class="icon-list icon-white"></i> Categories</a></li>
<li class=""><a href="#"><i class="icon-upload icon-white"></i> Upload</a></li>
<li class="dropdown" id="dropdown-click-user">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-user icon-white"></i> Username <b class="caret"></b></a>
<ul class="dropdown-menu" id="dropdown-menu-user">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
</ul>
</li>
</ul>
</div><!-- /.nav-collapse -->
</div><!-- /.container -->
</div><!-- /.navbar-inner -->
</div><!-- /.navbar -->
http://jsfiddle.net/PKDmn/を参照してください。
確認手順:
- 折りたたみアイコンが表示されるように、画面の幅が十分に小さいことを確認してください。
- 折りたたみアイコン (右上) をクリックします。
- ユーザー名のドロップダウンをクリックします (最初は展開されません)。
- 折りたたみメニューを閉じる (右上)
- 折りたたみメニューを開く (右上)
- ユーザー名のドロップダウンをクリックします(ここから機能するはずです)
他のすべてと同様に、初めて機能する必要があります。考え?
ありがとう、ティム