Bloquer menu déroulant sur un clic

kraster
Javascript

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:

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

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

7 réponses

JeremieMeunier

Bonjour, je rajouterais la classe open lorsque l'utilisateur clique sur l'<input> et lorsque qu'il clique sur ton body tu supprime la classe !

kraster
Auteur

Merci de votre réponse JeremieMeunier, c'est exactement ce que j'essaye de faire mais vu que je suis nul en javascript (je suis au niveau 1 sur 100 lol) je n'arrive pas à le faire !
J'ai fais un truck comme ça mais ça ne marche pas tjs !
Merci de me corriger.

$('.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(); 
        }); 
    });
JeremieMeunier

Le problème avec ton code c'est que tu as un click dans ton hover et le JS va prendre en priorité le hover et du coup dès que tu va quitter le hover il enlève la classe !

Je ferais plus comme ça en animant en CSS

//JS
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')
})
kraster
Auteur

Je vous remercie de votre réponse et pour votre aide.

JeremieMeunier

Ça fonctionne ?

kraster
Auteur

malheureusement ça ne marche pas :( Merci quand meme.

kraster
Auteur

Voici ma solution qui fonctionne parfaitement (pour les interessés) : 

$('.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();
   });
});

et merci de votre aide )