Question

我有一个菜单，显示当您将鼠标悬停在标题中的“菜单”链接上时。现在，下拉菜单通过CSS显示/隐藏。我想保留悬停功能，但也添加一个jQuery功能，如果你单击“菜单”这个词，它会切换菜单并保持打开状态，即使你将鼠标移开也是如此。

我可以做其中一个但是没有想出是否可以将两者结合起来。

这是我点击/切换的javascript：

$("#menu-drop-arrow").click(function(){
    var a=300;
    $("#menu").slideToggle(a);
    $("#hide_menu").click(function(){
        $("#menu").slideUp(a)
    })
});

是否有人知道是否可以通过悬停菜单来显示和隐藏菜单，但如果您点击该链接，它将保持菜单打开，直到您再次点击该链接？

谢谢！

编辑 * ** * ** * ** * ** * ** * ** * ** * ** * < / p>

以下是菜单代码示例，如果有帮助的话：

<div id="menu-drop">
 <div id="menu-drop-arrow"><span id="menu-text">Menu</span>
 <div class="show_col">
 <div class="menucat">
 <ul class="menuitem">
   *** menu links here **
 </ul>
 </div>

 <div class="menucat">
 <ul class="menuitem">
   *** menu links here ***
 </ul>
 </div>
 </div>
 </div>
 </div>

Answer 1

您需要使用代码来记住菜单所处的模式。让我们调用模式，例如“hover”和“stay”

单击菜单时，将切换模式。此外，您必须根据模式更改悬停事件的功能。（即如果模式为“悬停”，则执行正常显示/隐藏;如果模式为“停留”，则不执行任何操作）

jQuery下拉菜单 - 悬停并单击

1 个答案: