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

您需要代码来记住菜单处于哪种模式。我们将这些模式称为“悬停”和“停留”

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