2013-06-06 17 views
5

Mam navbar i mam karetkę obok rozwijanego menu.Twitter bootstrap split dropdown

W aktualnym kodzie, jeśli użytkownik kliknie tekst Operations, lub menu rozwijane, otwiera się menu rozwijane. Ale muszę to:

  • Jeśli użytkownik kliknie odnośnik Operations, chcę użytkownika, aby przejść do mojego /operations/ stronie.
  • Jeśli użytkownik kliknie na karetkę, menu rozwijane będzie widoczne. Jeśli użytkownik kliknie jedno z elementów menu rozwijanego, użytkownik zostanie przekierowany na pokrewną stronę.

Fiddle: 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> 

na Twitter dokumentacji bootstrap zauważa się, jak tworzyć listy rozwijanej przycisk Podziel here. Nie chcę używać przycisków. Czy możliwe jest zachowanie podziału bez użycia przycisków. Tylko z linkami?

+1

Dlaczego nie można po prostu zawinąć daszka w 'rozwijanej-toggle' i dodać normalny' href' do tekstu operacji? Zobacz [tutaj] (http://jsfiddle.net/UtDqm/5/) –

+0

@ JoshuaM takie samo zachowanie jak odpowiedź Stevie. Działa to, ale karetka przechodzi do następnej linii w pasku nawigacyjnym. [link do obrazu] (http://img571.imageshack.us/img571/4656/oper1.jpg) – trante

+0

Czy masz ustawiony styl 'a' na' display: block'? To wszystko, co mogę wymyślić, ponieważ to [działa dobrze dla mnie.] (Http://i.imgur.com/muE2sMI.png) –

Odpowiedz

8

Nie można po prostu podzielić linku Operacje na nowy znacznik <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

Działa to, ale karetka przechodzi do następnego wiersza w pasku nawigacyjnym. [image] (http://img571.imageshack.us/img571/4656/oper1.jpg) – trante

+0

Zobacz moje zmiany, nadpisany styl działa. –

+0

To działa świetnie, dziękuję :) – trante

3

Szukasz czegoś takiego?

<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/