Twitter Bootstrap: Cacher les autres popovers quand on est ouvert
Suivantes code d'Amorçage me donne "collant" liste (de sorte que les utilisateurs peuvent interagir avec le contenu à l'intérieur de la liste). Le problème est que quand une liste est ouverte, d'autres popovers doit être fermé (caché). Une idée de comment je peux le mettre en œuvre?
$("[rel=popover]").popover({placement:'bottom', trigger:'manual'}).hover(function(){
$(this).popover('show');
e.preventDefault();
});
source d'informationauteur farjam | 2013-02-07
Vous devez vous connecter pour publier un commentaire.
J'ai été en avoir un pour jouer avec cela et il ya quelques autres problèmes concernant le déclenchement du manuel d'afficher/masquer pour obtenir ce jouer gentiment. Passez la souris est en fait
mousein
etmouseout
et, sauf si vous ajoutez-y quelques vérifications supplémentaires, vous rencontrerez des problèmes que je viens de faire!Voici ma solution en action et je vais essayer d'expliquer ce que j'ai fait.
Cela a fonctionné parfaitement pour moi avec le code html suivant:
Espère que sortes vous 🙂
Il y a un solution très simple ici (pas ma solution, mais fonctionne à merveille):
Que par le bootstrap docs: Utiliser le focus de déclenchement de rejeter popovers sur le clic suivant que l'utilisateur fait.
À l'aide de Bootstrap 3 rappels d'événement que vous pouvez faire:
et en coffeescript
Simpiet solution pour fermer tous les autres popovers. Cela peut être ajouté à tous les cas où une fenêtre apparaît, cliquez/hover etc. Juste avant de vous montrer la liste de coller dans le code suivant:
Cela permettra d'éliminer tous les popovers sur la page, à l'exception de l'actuel
J'ai utilisé une fonction de mon contenu, donc je l'ai (en coffeescript) :
J'ai utilisé une fonction de mon contenu, et c'est un travail correctement.
Il suffit de remplacer cliquez avec le hover ou mousein pour répondre à vos besoins.
Cela fonctionne bien si vous voulez avoir une seule liste ouverte à la fois ouvert et fermé par une souris (le curseur de la position n'est pas pertinent):
Il est important que chaque liste dispose d'un parent, comme
HTML:
J'ai été en mesure d'accomplir similaire par masquer selon la liste n'est pas celui qui a été cliqué. Je ne suis pas sûr, mais il semble bien fonctionner pour moi. C'est pour la liste affichée sur cliquez et reste en vie. Il est caché lorsqu'une autre liste est cliqué.
moyen plus simple pour faire le travail:
assurez-vous, que votre liste a id unique ;]
votre liste va se comporter comme il le fait par défaut, une seule liste à la fois.
j'ai trouvé qu'il y a quelques problèmes avec la dynamique popovers, de sorte
voici 2 solutions statique et dynamique des popovers:
première solution est d'utiliser la liste d'option
triger:'focus'
mais cette option ne fonctionne pas sur certains appareils android
et la seconde:
Vous devez utiliser un
<a>
balise d'ancrage pour la compatibilité.Mon Violon: https://jsfiddle.net/oneflame/pnb8Ltj3/
Bootstrap Lien -- http://getbootstrap.com/javascript/#dismiss-on-next-click
Utiliser cette méthode pour masquer toutes les autres liste lorsque vous survolez ou cliquez sur un autre élément de liste pour l'ouvrir
un
deux
trois
quatre
Assurez-vous que vous l'ajouter bootstrap.js et bootstrap.css de la page.
Espérons que cette aide.
Cheers!!
Suraj Kumar