jquery - 交替使用 'click' 和/或 'hover' 通过 toggle() 激活下拉菜单

Question

我有一个简单的 CSS 驱动的下拉菜单。我正在使用 jQuery 通过“点击”或“悬停”来切换下拉菜单。但是，如果单击“菜单”两次(显示，然后再次隐藏)，悬停状态将被禁用。在这种情况下，有谁知道使用悬停状态返回切换的方法吗？

JSFiddle

非常感谢!

HTML

<ul class="menu">
    <li> <a class="trigger">MENU</a>

        <ul class="dropdown">
            <li><a href="#">Item 1</a></li>
            <li><a href="#">Item 2</a></li>
            <li><a href="#">Item 3</a></li>
            <li><a href="#">Item 4</a></li>
            <li><a href="#">Item 5</a></li>
        </ul>
    </li>
</ul>

CSS

.menu, .menu ul {
        list-style:none;
        cursor:pointer;
        margin:0;
        padding:0;
    }
    .menu a {
        float:left;
        text-decoration:none;
        color:#000;
    }
    .menu li:hover > a {
        color:#666;
    }
    .menu ul {
        opacity:0;
        visibility:hidden;
        position:absolute;
        top:25px;
        z-index:1;
        background:#666;
    }
    .menu li:hover > ul {
        opacity:1;
        visibility:visible;
    }
    .menu ul a {
        padding:5px;
        display:block;
        text-transform:none;
    }
    .menu ul a:hover {
        background-color:lightgray;
    }

jQuery

$('.trigger').on("click hover", function() {
    $('.dropdown').toggle();
});

Answer 1

它不在这里，但我确定你的 CSS 中有这行代码:

.trigger:hover .dropdown {
   display: block;
}

我建议您将其添加到您的 CSS 中。

.trigger:hover .dropdown,
.trigger.clicked .dropdown {
   display: block;
}

将鼠标悬停在 <li> 上时会显示菜单当它有 clicked类。

然后，你必须添加这行javascript:

var timeoutMenu = null;
$('.trigger').on("click", function() {
    $('.dropdown').toggleClass('active');
});

$('.trigger').hover(function() {
    clearTimeout(timeoutMenu);
    $('.dropdown').toggleClass('active');
}, function() {
    setTimeout(function() {
      $('.dropdown').removeClass('active');
    }, 500);
});

当您将鼠标悬停在菜单上时，会出现其子菜单，当您将鼠标移开时，菜单会在 500 毫秒后隐藏。

希望对您有所帮助。

问候。