Bootstrap 3 listes déroulantes: sur le vol Stationnaire et Cliquez sur
Presque tous les liens sur ma barre de navigation sont des listes déroulantes. Je voudrais qu'elles apparaissent sur le vol stationnaire pour les grands écrans, mais sur cliquez sur pour les petits écrans. Est-ce possible? Dans ma recherche pour la réponse, je suis tombé sur ceci: Bootstrap Menu: liste Déroulante sur le vol Stationnaire pour le Bureau Seulement. Cela ne fonctionne pas pour moi parce que je ne veux pas l'ensemble de la liste déroulante d'être invisible sur le mobile; je n'avais que cela soit visible sur les cliquer sur le vol stationnaire.
- Depuis l'événement de clic n'est pas viable dans le CSS (encore!), nous ne pouvons tout simplement pas faire cela avec les CSS media queries. Au lieu de cela, l'utilisation de JavaScript pour saisir les navigateurs UserAgent chaîne pour vérifier l'encontre d'une expression régulière qui correspond à mobile, vu ici:(stackoverflow.com/questions/11381673/...)
- Veuillez noter que les grands écrans peuvent encore être uniquement tactiles (tablettes en mode paysage). C'est pourquoi Bootstrap utilise le toucher/cliquez sur événements exclusivement.
- Vous pouvez utiliser Modernizr pour détecter les capacités tactiles dans le navigateur. Envisager de cet article, cependant
Vous devez vous connecter pour publier un commentaire.
ÉDITÉ
La réponse de @ouwen-huang est très bien, mais depuis que jQuery est une dépendance de bootstrap.js, vous pourriez aussi bien le faire le jQuery, par simple ajout de tous les événements que vous souhaitez joindre aux devis séparé par un espace:
Les sélecteurs sont basées sur la norme Bootstrap balisage, prises directement à partir de la documentation de la sorte:
Le point ici est que si vous êtes sur une souris-appareil compatible comme un ordinateur de bureau qui n'ont pas de capacité tactile, puis le mouseenter/mouseleave sont licenciés et le menu est activé sans clic. Si l'utilisateur n'est pas sur un appareil qui déclenche un mouseenter/mouseleave événement puis de cliquer ou d'appuyer des événements sont déclenchés lorsque la personne clique sur le lien et cliquez ou appuyez sur gestionnaire gère la liste déroulante de la bascule.
ÉDITÉ pour plus de précision.
Les 2 autres solutions de travail mais ne le gardez pas le bootstrap style. Une solution plus simple est d'ajouter simplement la "ouvrir" de la classe.
Vous pouvez utiliser javascript événements.
À l'aide de l'enregistrement mobile de la bibliothèque, vous pouvez dire
Après avoir essayé de nombreux plugins et des solutions postés à travers stackoverflow, je suis venu avec plutôt simple code:
Version Simple
$('.navbar-toggle').is(':visible')
vérifie si nous sommes actuellement dans la vue mobile,$(this).toggleClass('open', true)
ajoute ou supprime desopen
classe css utilisée par bootstrap,et
window.location = $(this).attr('href')
envoie de l'utilisateur à l'emplacement défini dans le lien href.Pour ajouter jQuery transitions, nous allons modifier le script un peu.
Version modifiée
visible
variable rend tout fonctionne bien lors de la ré-planant alors que l'animation est en cours d'exécution.Une belle façon d'y parvenir est de passer activée uniquement lorsque le menu n'est pas effondré.
Ici est une version légèrement modifiée de @jme11 's Réponse repose sur la Bootstrap 3 documentation pour Javascript, des listes déroulantes. L'avantage de cette méthode est qu'elle permet à l'déroulant à fonctionner exactement comme prévu sans avoir à modifier toutes les classes et est donc plus propre de l'OMI.
Codepen Exemple
$(this)
à la place.C'est simple et fonctionne bien, mais sur mobile, si vous ouvrez un sous-menu et cliquez sur l'élément de menu pour le fermer, il ne ferme pas
Pour Bootstrap 4 code suivant fonctionne.