无法显示和隐藏引导下拉菜单

Question

我正试图在悬停时显示一个下拉菜单，然后离开。该代码部分地工作；setTimeout"；它进行了所有的更改，但当我添加"；setTimeout"；菜单显示并停留，直到你再次悬停它才会消失。我尝试过将函数分离并调用"；。下拉菜单"；再次用"；。模糊"；它隐藏了它，但也不起作用。

如果你问的话，我想设置时间，因为它有一点失去悬停的余地，所以我只想避免有人慢慢滚动而感到不舒服，这只是为了用户体验。我知道我可以修改CSS，让它看起来有点高，但我更知道如何为未来的问题做这件事。

$(document).ready(
function () {
$('.dropdown').hover(function() {
$(this).toggleClass('show');
var menu = $(this).children('.dropdown-menu');
var arial = $(this).children('#navbarDropdown');
$(arial).attr('aria-expanded', 'true');
menu.toggleClass('show');
}, 
setTimeout(function() {
var menu = $(this).children('.dropdown-menu');
var arial = $(this).children('#navbarDropdown');
$(this).removeClass('show');
$(arial).attr('aria-expanded', 'false');
menu.removeClass('show');
}, 2000));
}
);

以下是下拉列表示例：

<li id="drop" class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a> 
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Category 1</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Category 2</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Category 3</a>
</div>
</li>

谢谢你的帮助。如果有人想知道，下面是最终结果：

$(document).ready( 
function () {
$('.dropdown').hover(function() {
$(this).toggleClass('show');
var menu = $(this).children('.dropdown-menu');
var arial = $(this).children('#navbarDropdown');
arial.attr('aria-expanded', 'true');
menu.toggleClass('show');
}, function () {
var menu = $('.dropdown').children('.dropdown-menu');
var arial = $('.dropdown').children('#navbarDropdown');
setTimeout(function () {
$('.dropdown').removeClass('show');
arial.attr('aria-expanded', 'false');
menu.removeClass('show');   
}, 400);    
});                     
});

Answer 1

$(this)不能在时间函数中使用。请改用$('.dropdown')。

$(document).ready(
function () {
$('.dropdown').hover(function() {
$(this).toggleClass('show');
var menu = $(this).children('.dropdown-menu');
var arial = $(this).children('#navbarDropdown');
arial.attr('aria-expanded', 'true');
menu.toggleClass('show');
}, 
setTimeout(function() {
$('.dropdown').removeClass('show');

var menu = $(this).children('.dropdown-menu');
var arial = $(this).children('#navbarDropdown');
$(this).removeClass('show');
arial.attr('aria-expanded', 'false');
menu.removeClass('show');
}, 2000));
}
);

使用arial而不是$(arial)也更干净，因为arial已经是一个jQuery对象，就像menu一样