2012-06-18 14 views
8

Twitter Bootstrap'ın açılır menüsünün bir tıklatmada görünmesini, bir tıklamanın görünmesini nasıl değiştireceğiniz konusunda birçok soru/cevap var gibi görünüyor. Bootstrap oluşturucularının, hover yerine tıklamanın kullanılmasının iyi bir nedeni vardır. Hover, çoğu tablette & telefonlarda çalışmaz. Ancak, Bootstrap kullanmamın nedenlerinden biri, yanıt veren özellikleridir. Masaüstü bilgisayarlarda, tabletlerde ve telefonlarda görüntülenebilecek bir site istiyorum. Tabletler ve telefonlar için açılır menüyü tıklatmak gerekli olsa da, masaüstleri için beklenen davranış değildir. Sitemin yanıt vermesini istiyorum, ancak kullanıcıları yeniden eğitme pahasına değil!Twitter Bootstrap: Masaüstleri için Açılır Menüler Hover, Tabletler/Telefonlar için Tıklayın?

Tabletler ve telefonlar için masaüstleri için açılan açılır menüleri ve açılır menü açılır menülerini tıklatmanın bir yolu var mı? Sen Açılır menülerde çalışma olanağı sağlar "Duyarlı Hizmet sınıfları"

sayfa

cevap

2

hover üzerinde, ancak Twitter Bootstrap'in tıklama etkinliğine müdahale etmiyor, bu yüzden her ikisini de güvenli bir şekilde bağlayabilirsiniz. Bu, bir fare varsa, vurgulu hale gelecektir, ancak fare yoksa (yani bir tablette dokunmatik ekran)), tıklandığında hala aktif olacaktır.

Ben GitHub'dan barındırılan eklenti var: Açıkça diyerek çalışır https://github.com/CWSpear/twitter-bootstrap-hover-dropdown

ama yakın gelecekte veri nitelikleri ile çalışmak için kod çimdik için gidiyorum.

+1

Aslında :-)

Teşekkür beni YUKARI oy verecek, ben sahip olmak zorunda kalacak gibi görünüyor menümün iki ayrı sürümü. Biri telefon/tablet için gösterir ve biri masaüstü için gösterilir. İdeal olarak, sadece bir menü istiyorum. –

+0

@TonyaAbna bunu http://jsfiddle.net/baptme/gRVUq/1/ yapabilirsiniz, ancak 2. tıklamadaki açılır kapanışı kapatmak için jQuery'ye ihtiyacınız olacaktır. – baptme

+0

baptme, cevabını anladığımdan emin değilim. Tıklama yerine tıklama işini nasıl yaptığınızı görüyorum, ancak masaüstü için gezinip telefon/tablet için tıklama yapabilecek bir çözüm arıyorum. Demoda bir şey özlüyor muyum? Boş tıklama işlevi ne yapar? –

4

Ben bir eklenti oluşturdu dibinde http://twitter.github.com/bootstrap/scaffolding.html (birkaç ayrıntılandırmaları üzerinde çalışıyor, ama kesinlikle olduğu gibi çalışır) ile can

+1

CWSpear: Eklentiniz çok iyi çalışıyor ve kurulumu çok kolay. Paylaştığınız için gerçekten minnettarım. Teşekkürler! ~ Susan – susan

+0

çok havalı ..ve kolay @CWSpear –

1

Tam olarak bunun için arama yapıyordum. Ve daha iyi bir çözüm buldum (bence). Bunu harika Modernizr.js kütüphanesini kullanarak kolayca yapabiliriz. Dokunmatik ekran cihazını aşağıdaki işlevle algılayabiliriz.

function is_touch_device() { 
    return !!('ontouchstart' in window); 
} 

Sonra dinamik Javascript üzerinden ya konumu için "#" değiştirerek veya ana menü öğeleri varsayılan eylemi önleyerek köprüler URL'yi devre dışı bırakabilir. Son kod aşağıdaki gibi olacaktır.

Daha fazla ayrıntı için Gördüğünüz this link İnanıyorum ki birisi duyarlı yarar sınıfları kullanarak,

+0

Çözümünüzün, Modernizr.js kitaplığı ile pek bir ilgisi yok gibi görünüyor ... jQuery ile neredeyse aynı hizada çalışacak gibi görünüyor. (düzenleme: kitaplık adındaki yazım hatası) –

İlgili konular