javascript - jQuery 下拉菜单 - 悬停并单击

Question

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

我可以做一个或另一个，但还没有想出是否可以将两者结合起来。

这是我用于点击/切换的 javascript:

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

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

谢谢!

编辑 ************ *************

如果对您有帮助，这里是菜单代码示例:

<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

您需要代码来记住菜单所处的模式。让我们调用这些模式，例如，“悬停”和“停留”

单击菜单时，将切换模式。此外，您还必须根据模式更改悬停事件的作用。 (即，如果模式是“悬停”，则正常显示/隐藏；如果模式是“停留”，则什么都不做)