时间戳

首页 > 解决方案 > 无法使引导下拉菜单显示和隐藏

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

问题描述

我正在尝试在悬停时显示下拉菜单，然后离开。此代码部分工作，没有“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);    
        });                     
});

标签： javascripthtml

解决方案

$(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

推荐阅读