Question

我有一个简单的CSS驱动下拉菜单。我使用jQuery通过点击＆＃39;来切换下拉列表。或者＆＃39;悬停。＆＃39;但是，如果点击＆＃34;菜单＆＃34;两次（显示，然后再次隐藏），悬停状态变为禁用状态。在这种情况下，有没有人知道使用悬停状态返回切换的方法？

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毫秒。

希望它有所帮助。

问候。

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

1 个答案: