關閉鼠標上的jQuery菜單離開

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

---

SOLUTION通過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

由於您使用的是懸停函數，懸停函數指定了兩個函數來觸發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'); 
});