Закрыть меню jQuery на mouseLeave

Question

Я создаю небольшой раскрывающийся контейнер, который появляется, когда вы навешиваете поверх элемента меню. Когда я нахожусь над элементом меню (например, «Инструменты») появляется выпадающее меню, я могу перемещать мышь внутри, но когда курсор покидает раскрывающееся меню, оно не исчезает. Как я могу это достичь?

Мне удалось удалить его, когда вы нажимаете где-то за его пределами.

Вот Fiddle.

var dropdown = $('.nav-dropdown'); 

dropdown.hide(); 

$('#dropdownToggle').hover(function(e) { 
    e.preventDefault(); 
    dropdown.show(200); 
    dropdown.addClass('active'); 

    $(window).click(function() { 
    dropdown.slideUp(); 
    }); 

    e.stopPropagation(); 
}); 

---

РЕШЕНИЕ по anima_incognita:

var dropdown = $('.nav-dropdown'); 

dropdown.hide(); 

$('#dropdownToggle').hover(function(e) { 
    e.preventDefault(); 
    dropdown.show(200); 
    dropdown.addClass('active'); 

    $(window).click(function() { 
    dropdown.slideUp(); 
    }); 

    $(".nav-dropdown").on('mouseleave',function(){ 
     dropdown.slideUp(); 
    }); 

    e.stopPropagation(); 
}); 

Answer 1

Добавьте это в конец вашего кода:

$(".nav-dropdown").on('mouseleave',function(){ 
    dropdown.hide(); 
}); 

Answer 2

здесь править в коде работал хорошо со мной ... добавлено Методы

var dropdown = $('.nav-dropdown'); 

dropdown.hide(); 

$('#dropdownToggle').mouseenter(function(e) { 
    e.preventDefault(); 
    dropdown.show(200); 
    dropdown.addClass('active'); 

    $(window).click(function() { 
    dropdown.slideUp(); 
    }); 

$('#dropdownToggle').mouseleave(function(e) { 
dropdown.slideUp(); 
}); 
    e.stopPropagation(); 
}); 

Answer 3

Обновить Ваше JS:

var dropdown = $('.nav-dropdown'); 
 

 
dropdown.hide(); 
 

 
$('#dropdownToggle').hover(function(e) { 
 
    e.preventDefault(); 
 
    dropdown.show(200); 
 
    dropdown.addClass('active'); 
 

 
    $(window).click(function() { 
 
    dropdown.slideUp(); 
 
    }); 
 

 
    e.stopPropagation(); 
 
}); 
 

 
$(".nav-dropdown").on('mouseleave', function() { 
 
\t dropdown.slideUp('fast'); 
 
});

.nav-list { 
 
    .nav-list-item { 
 
    float: left; 
 
    list-style: none; 
 
    padding: 2rem; 
 
    background: tomato; 
 
    font-family: 'Helvetica', 'Arial', sans-serif; 
 
    a { 
 
     text-decoration: none; 
 
     text-transform: uppercase; 
 
     font-weight: bold; 
 
     color: #fff; 
 
    } 
 
    .nav-dropdown { 
 
     position: absolute; 
 
     background: turquoise; 
 
     padding: 2rem; 
 
     li { 
 
     margin-bottom: 2rem; 
 
     } 
 
    } 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="nav-list"> 
 

 
    <li class="nav-list-item"> 
 
    <a href="#" class="nav-link services">Services</a> 
 
    </li> 
 

 
    <li class="nav-list-item dropdown-wrapper"> 
 
    <a href="#" id="dropdownToggle" class="nav-link tools">Tools 
 
\t \t \t \t \t \t \t \t </a> 
 
    <!-- dropdown --> 
 
    <ul class="nav-dropdown active" style="display: block;"> 
 

 
     <li class="nav-dropdown-item"> 
 
     <a href="#" class="nav-dropdown-item-link">Buyer Cost Sheet</a> 
 
     </li> 
 

 
     <li class="nav-dropdown-item"> 
 
     <a href="#" class="nav-dropdown-item-link">Seller Net Sheet</a> 
 
     </li> 
 

 
     <li class="nav-dropdown-item"> 
 
     <a href="#" class="nav-dropdown-item-link">Mortage Calculator</a> 
 
     </li> 
 

 
     <li class="nav-dropdown-item"> 
 
     <a href="#" class="nav-dropdown-item-link">Title Fees</a> 
 
     </li> 
 

 
     <li class="nav-dropdown-item"> 
 
     <a href="#" class="nav-dropdown-item-link">Refi Calculator</a> 
 
     </li> 
 

 
     <li class="nav-dropdown-item"> 
 
     <a href="#" class="nav-dropdown-item-link">Real Estate Forms</a> 
 
     </li> 
 

 
    </ul> 
 
    </li> 
 

 
    <li class="nav-list-item"> 
 
    <a href="buyersandsellers.html" class="nav-link buy-sale">Buyers &amp; Sellers</a> 
 
    </li> 
 

 
</ul>

Answer 4

Как вы используете зависать функция, функция hover указывает две функции для запуска события mouseenter и mouseleave

Вы определили только функцию mouseenter и не определили функцию mouseleave. Ниже приведен обновленный код JS:

$('#dropdownToggle').hover(function(e) { 
e.preventDefault(); 
dropdown.show(200); 
dropdown.addClass('active'); 
e.stopPropagation(); 
}, function(e){ 
e.preventDefault(); 
dropdown.slideUp();; 
dropdown.removeClass('active'); 
});