2013-06-06 5 views
5

私はnavbarを持っており、ドロップダウンメニューの隣にはキャレットがあります。Twitterのブートストラップ分割ドロップダウン

ユーザーがOperationsテキストまたはキャレットをクリックすると、ドロップダウンメニューが開きます。ユーザーがOperationsリンクをクリックした場合、私は私の/operations/ページに移動するには、ユーザーが欲しい

  • :しかし、私はこれを必要とします。
  • ユーザーがキャレットをクリックすると、ドロップダウンメニューが表示されます。ユーザーがドロップダウンメニューのいずれかの要素をクリックすると、ユーザーは関連ページにリダイレクトされます。

フィドル:http://jsfiddle.net/mavent/UtDqm/2/

<div class="navbar navbar-inverse"> 
    <li class="dropdown" id="myTools"> 
    <a class="dropdown-toggle" data-toggle="dropdown" href="#myTools"> 
     Operations 
     <b class="caret"></b> 
    </a> 
    <ul class="dropdown-menu"> 
     <li><a href="/mypage1/">MyPage 1</a></li> 
     <li><a href="/mypage2/">MyPage 2</a></li> 
    </ul> 
    </li> 
</div> 

は、Twitterのブートストラップのドキュメントでは、分割ボタンのドロップダウンhereを作成する方法が注目されます。私はボタンを使いたくない。ボタンを使わずにスプリットビヘイビアを持つことは可能ですか?リンクだけで?

+1

? [ここ](http://jsfiddle.net/UtDqm/5/)を参照してください。 –

+0

@JoshuaM Stevieの答えのような同じ行動です。これは動作しますが、キャレットはナビゲーションバーの次の行に移動します。 [image link](http://img571.imageshack.us/img571/4656/oper1.jpg) – trante

+0

'a'スタイルは' display:block'に設定されていますか?それは[私にとってはうまくいく]と思うことがあります。(http://i.imgur.com/muE2sMI.png) –

答えて

8

オペレーションリンクを新しい<a>タグに分割できませんでしたか?

<div class="navbar navbar-inverse"> 
    <li class="dropdown" id="myTools"> 
    <a href="/operations/" style="display:inline-block;padding-right:0px;">Operations</a> 
    <a class="dropdown-toggle" data-toggle="dropdown" href="#myTools" style="display:inline-block;padding-left:0px;"> 
     <b class="caret"></b> 
    </a> 
    <ul class="dropdown-menu"> 
     <li><a href="/mypage1/">MyPage 1</a></li> 
     <li><a href="/mypage2/">MyPage 2</a></li> 
    </ul> 
    </li> 
</div> 
+0

これは機能しますが、キャレットはナビゲーションバーの次の行に移動します。 [image](http://img571.imageshack.us/img571/4656/oper1.jpg) – trante

+0

オーバーライドされたスタイルの作品を編集します。 –

+0

それは素晴らしい作品です、ありがとう:) – trante

3

このようなものをお探しですか?あなただけの `ドロップダウン・toggle`にキャレットをラップし、業務のテキストに通常の` href`を追加しないのはなぜ

<div class="btn-group"> 
    <a href="http://google.com" target="_blank" class="btn btn-link">Action</a> 
    <a href="#" class="btn btn-link dropdown-toggle" data-toggle="dropdown"> 
    <span class="caret"></span> 
    </a> 
    <ul class="dropdown-menu"> 
     <li><a href="/mypage1/">MyPage 1</a></li> 
     <li><a href="/mypage2/">MyPage 2</a></li> 
    </ul> 
</div> 

http://jsfiddle.net/UtDqm/6/

関連する問題