Bloquer menu déroulant sur un clic

Version imprimable

25/11/2016, 03h06
alexandre_26

Bloquer menu déroulant sur un clic
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:

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.

Cette solution ne marche pas:

Code:

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:

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')
})

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

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().

30/11/2016, 01h09
alexandre_26

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