2013-06-06 11 views
5

Bir navbarım var ve açılır menünün yanında bir kartetim var. Kullanıcı Operations metin veya düzeltme işaretini tıklarsa cari koduTwitter bootstrap bölünmüş açılır

, açılır menü açılır. Ama buna ihtiyacım: Kullanıcı Operations bağlantıyı tıklarsa

  • , ben kullanıcı benim /operations/ sayfasına gitmek istiyorum.
  • Kullanıcı oy karesini tıklarsa, açılır menü görünecektir. Kullanıcı açılır menü öğelerinden birini tıklarsa, kullanıcı ilgili sayfaya yönlendirilir.

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> 

Heyecan önyükleme Belgelemede, bölünmüş düğme açılır listesini here nasıl oluşturulacağını kaydetti. Düğmeleri kullanmak istemiyorum. Düğmeleri kullanmadan bölünmüş davranışı olması mümkün mü? Sadece bağlantılarla mı?

+1

Neden sadece 'açılır-toggle' İnceltme sarın ve operasyonlar metne normal' href' katmayan? [Burada] (http://jsfiddle.net/UtDqm/5/) –

+0

@JoshuaM Stevie'nin cevabı gibi aynı davranışlara bakın. Bu çalışır ama caretta navbardaki bir sonraki satıra gider. [Image link] (http://img571.imageshack.us/img571/4656/oper1.jpg) – trante

+0

'ekranı olarak ayarlanır' a' tarzı var mı: block'? Tüm bunlar benim düşünebildiğim kadarıyla, benim için iyi çalışıyor.] (Http://i.imgur.com/muE2sMI.png) –

cevap

8

değil sadece Operasyonlar yeni <a> etiketine bağlantı bölünmüş olabilir mi?

<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

Bu çalışır ancak caret navbardaki bir sonraki satıra gider. [image] (http://img571.imageshack.us/img571/4656/oper1.jpg) – trante

+0

Düzenlemelere bakın, geçersiz kıl tarzı çalışır. –

+0

Bu harika çalışıyor, teşekkürler :) – trante

3

Böyle bir şey mi arıyorsunuz?

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