通过切换（）交替使用“单击”和/或“悬停”来激活菜单下拉菜单答案

【问题标题】：Using 'click' and/or 'hover' interchangeably to activate a menu dropdown via toggle()通过切换（）交替使用“单击”和/或“悬停”来激活菜单下拉菜单
【发布时间】：2014-08-05 03:23:58
【问题描述】：

我有一个简单的 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();
});

【问题讨论】：

这很奇怪，它似乎无论如何都应该工作

标签： jquery css

【解决方案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 毫秒内隐藏。

希望对你有帮助。

问候。

【讨论】：