Il semble y avoir de nombreuses questions / réponses sur la manière de changer les dépositions de Twitter Bootstrap de comparaître sur un clic pour apparaître sur une survolte. Les constructeurs de bootstrap ont une bonne raison pour utiliser un clic au lieu de planer - Hover ne fonctionne pas sur la plupart des tablettes et des téléphones. Cependant, l'une des raisons pour lesquelles j'utilise Bootstrap est destinée à ses caractéristiques réactives. Je veux un site pouvant être visualisé sur des ordinateurs de bureau, des tablettes et des téléphones. Bien que la liste déroulante soit nécessaire pour les tablettes et les téléphones, ce n'est pas le comportement attendu des ordinateurs de bureau. J'aimerais que mon site soit réactif, mais pas au détriment de devoir recycler les utilisateurs!
Y a-t-il un moyen de servir des déposées survolez pour les ordinateurs de bureau et cliquez sur Dropdowns pour les tablettes et les téléphones?
3 Réponses :
Vous pouvez avec "classes utilitaires réactives"
http://twitter.github.com/bootstrap/scaffolding.html à le bas de la page
En fait, en utilisant des classes utilitaires réactives, il semble que je devrais avoir deux versions distinctes de mon menu. On montrerait pour téléphone / tablette, et on montrerait pour le bureau. Idéalement, je ne veux qu'un seul menu.
@Tonyaabna vous pouvez faire ce jsfiddle.net/baptme/grvuq/1 mais vous aurez besoin de Quelques jQuery pour fermer la liste déroulante du 2e clic.
Baptme, je ne suis pas sûr de comprendre votre réponse. Je vois comment vous avez créé le travail déroulant sur Hover au lieu de cliquer, mais je cherche une solution pouvant faire survol pour le bureau et cliquer sur téléphone / tablette. Est-ce que je manque quelque chose dans ta démo? Que fait la fonction de clic vide?
@Tonyaabna Les travaux déroulants par cliquez sur Par défaut, il n'y a donc rien à changer pour le mobile. Mais en ajoutant le CSS: survoler Vous perdez la possibilité de fermer la liste déroulante sur le mobile (testé sur un iPad). La fonction vide ne fait rien.
J'ai créé un plugin (travaillant sur quelques raffinements, mais cela fonctionne définitivement tel quel) qui permet aux publications de travailler sur la survolte, mais elle n'interfère pas avec l'événement de clic de Twitter Bootstrap, afin que vous puissiez lier les deux en toute sécurité, ce qui permet de lier en toute sécurité les deux signifie s'il y a une souris, il va activer sur la survolte, mais s'il n'y a pas une souris (c'est-à-dire un écran tactile sur une tablette), il sera toujours activé lorsque vous cliquez sur.
J'ai le plugin hébergé sur github: https://github.com/cwspear/ Twitter-Bootstrap-Hover-Dropdown
Cela fonctionne en l'appelant explicitement, mais je vais modifier le code pour travailler avec des attributs de données dans un proche avenir.
CWSpear: votre plugin fonctionne superficiellement et super facile à installer / à utiliser. Vraiment apprécier que vous partagiez cela. Merci! ~ Susan
Je cherchais exactement pour cela. Et j'ai trouvé une meilleure solution (je pense).
Nous pouvons facilement faire cela en utilisant une bibliothèque impressionnante $(document).ready(function() {
/* If mobile browser, prevent click on parent nav item from redirecting to URL */
if(is_touch_device()) {
$('#mainmenu li > ul').each(function (index, ev) {
/* Option 1: Use this to modify the href on the <a> to # */
$(ev).prev('a').attr('href' ,'#');
/* OR Option 2: Use this to keep the href on the <a> intact but prevent the default action */
$(ev).prev('a').click(function(event) {
event.preventDefault();
});
});
}
});
Votre solution ne semble pas avoir beaucoup à voir avec la bibliothèque modernizr.js ... Semble que cela fonctionnerait presque Verbatim avec JQuery. (Edit: Typo dans le nom de la bibliothèque)