jQuery下拉菜单-单击“可见”

我需要一个下拉菜单，可以做两件事

当我们悬停时，子菜单应该是可见的。当鼠标取出时，它应该隐藏起来

当用户单击菜单或其子菜单时，子菜单应可见。当鼠标取出时，它不应该隐藏 我试过这个，但不起作用

HTML

JS

$（'body'）.ready（函数（）{
$（'.dropdown'）.hover（函数（）{
$（this）.find（'.sub_导航'）.slideToggle（）；
});
});
$（'body'）.ready（函数（）{
$（'.dropdown a'）。单击（函数（）{
$（this.find（'.sub_导航'）.show（）；
});
});

请给我一些提示

---

谢谢你

这样做的大致方法是： 首先，您应该隐藏sub_导航，即

.sub_navigation{
    display:none;
}

jQuery：

$('body').ready(function() {
    $('.dropdown').hover(function() {
        if(!$(this).hasClass("isClicked")){
        $(this).find('.sub_navigation').slideToggle();
        }
    });
    $('.dropdown').click(function(){
        $(this).addClass('isClicked');
    });
    $('.dropdown .sub_navigation').click(function(){
        $(this).parent().addClass("isClicked");
    });
});

​

见工作解决方案

.sub_navigation{
    display:none;
}

$('body').ready(function() {
    $('.dropdown').hover(function() {
        if(!$(this).hasClass("isClicked")){
        $(this).find('.sub_navigation').slideToggle();
        }
    });
    $('.dropdown').click(function(){
        $(this).addClass('isClicked');
    });
    $('.dropdown .sub_navigation').click(function(){
        $(this).parent().addClass("isClicked");
    });
});