Discussion :

[alexandre_26]

Bonjour,
J'ai un menu déroulant au survol de la souris avec Bootstrap. Dans mon menu déroulant, j'ai un input de recherche. Je voudrais faire en sorte que lorsque l'utilisateur clic sur l'input le menu se bloque et que même si la souris sort du menu il reste affiché. Lorsque l'utilisateur clic ailleurs sur la page, le menu disparaisse.
Mon code:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
$('.dropdown').hover(function() {
    $('.dropdown-menu', this).stop(true, false).slideToggle();
    $(this).toggleClass('open');
});

J'espère avoir été clair .
Merci de vos réponses.

[alexandre_26]

Cette solution ne marche pas:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 
$('.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(); 
   }); 
});

et cette solution aussi ne marche pas:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
var dropmenu = document.querySelector('div.monmenu')
var input = dropmenu.querySelector('input')
var body = body
 
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')
})

[Toufik83]

Edit : essaie d'ajouter un id='myInput' a ton input de recherche qui est dans le menu déroulant, puis essaie ce code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
$('.dropdown').hover(function() {
  if (!$('.dropdown-menu').is(':visible')) {//si le menu n'est pas visible
    $('.dropdown-menu').slideDown();//affiche le menu
  }
});
$(document).click(function() {//clique n'importe ou sur le document
  if ($('.dropdown-menu').is(':visible') && !$('#myInput').is(':focus')) {//si le menu est visible ET l'input ne contient pas de focus
    $('.dropdown-menu').slideUp();//cache le menu
  }
});

remarque : il existe aussi jQuery.mouseenter() et jQuery.mouseleave() au cas ou tu ne veux pas utiliser jQuery.hover().

[alexandre_26]

Bonjour,
Votre code est très élegant Monsieur Toufik, avec quelques petites modifications ça marche. L'affaire est résolue merci )