Bloquer un menu déroulant au survol (bootstrap) sur input focus
kraster Le 27 novembre 2016 à 20:30 (Édité le 25 janvier 2019 à 17:52)
J'ai un menu déroulant au survol avec Bootstrap. Dans mon menu déroulant, j'ai 2 input username et mot de passe. Je voudrais faire en sorte que lorsque l'utilisateur clic sur l'une des inputs le menu se bloque et que même si la souris sort de ce dernier il reste affiché. Lorsque l'utilisateur clic ailleurs sur la page, le menu remonte normalement.
Mon code:
$('.dropdown').hover(function(){
$('.dropdown-menu', this).stop(true, false).slideToggle();
$(this).toggleClass('open');
});
$('.dropdown').hover(function() {
$('.dropdown-menu', this).stop(true, false).slideToggle();
$(this).toggleClass('open');
$('.inputx').click(function() {
$(this).focus();
e.stopImmediatePropagation();
return false;
});
$(document).click(function(){
$('.dropdown-menu1').slideToggle();
});
});
var dropmenu = document.querySelector('div.monmenu')
var input = dropmenu.querySelector('input')
dropmenu.addEventListener('mouseover', function (e) {
dropmenu.classList.add('open')
})
dropmenu.addEventListener('mouseout', function (e) {
dropmenu.classList.remove('open')
})
input.addEventListener('click', function (e) {
dropmenu.classList.add('open')
})
Merci de vos réponses.
TheOldNoob Le 27 novembre 2016 à 22:34
Il faut remplacer le hover(au passage de la souris) par un clic
Pour ma part, j'utilise se scipt pour faire apparaitre ou disparaitre une div.
jQuery(document).ready(function() {
jQuery('.condition').hide();
jQuery('.clickMe').click(function() {
jQuery(this).siblings('.condition').slideToggle(400);
return false;
});
});
kraster Le 28 novembre 2016 à 01:36 (Édité le 28 novembre 2016 à 01:38)
Merci de votre réponse TheOldNoob, mon menu déroulant marche très bien avec ce code:
$('.dropdown').hover(function(){
$('.dropdown-menu', this).stop(true, false).slideToggle();
$(this).toggleClass('open');
});
Je veux faire un effet semblable à celui sur cette page: http://www.monshowroom.com
En haut à droite, il y a "mon compte", au passage du pointeur le menu descent et remonte automatiquement en déplaçant la souris hors div, mais une fois la zone de text "adresse email" ou "mot de passe" est séléctionnée, le menu reste bloqué ouvert jusqu'au clic quelque part sur le body. Merci d'avance )
TheOldNoob Le 28 novembre 2016 à 08:21
Je t'es donné la solution juste au dessus. Je donne jamais les solutions sans te laisser chercher un peu. Sinon tu apprendra jamais 😀
kraster Le 29 novembre 2016 à 23:00 (Édité le 29 novembre 2016 à 23:01)
kraster Le 1 décembre 2016 à 01:10
Voici ma solution qui fonctionne parfaitement:
$('.dropdown').hover(function() {
$('.dropdown-menu', this).stop().slideToggle().delay();
$(this).toggleClass('open');
if ($('.dropdown-user').is(':visible') && $('.input').is(':focus')) {
$('.dropdown-user').stop();
}
$(document).click(function() {
$('.dropdown-user').slideUp();
});
});
