Question

我正在尝试在悬停时显示一个下拉菜单，然后消失。此代码部分起作用，没有“ setTimeout”，它将进行所有更改，但是当我添加“ setTimeout”时，菜单显示并停留，直到再次将其悬停时它才会消失。我尝试过分离功能，并使用隐藏了它的“ .blur”再次调用“ .dropdown”，但两者都不起作用。

如果您要问，我想设置时间，因为它有一点余地可以使鼠标悬停，所以我只想避免有人缓慢滚动而感到不适，这只是为了用户体验。我知道我可以修改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

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

1 个答案: