jquery - jQuery 下拉菜单 - 点击可见

Question

我需要一个下拉菜单，它应该做两件事。

1. 当我们悬停时，子菜单应该是可见的。当鼠标取出时，它应该隐藏起来。
2. 当用户点击菜单或其子菜单时，子菜单应该是可见的。鼠标取出时不应隐藏。

我试过这个，但它不工作......

HTML

<ul id="navigation">
    <li class="dropdown"><a href="#1">Home</a>
    <li class="dropdown"><a href="#2">Solutions</a>
        <ul class="sub_navigation">
            <li><a href="#2">Video</a></li>
            <li><a href="#3">Animation</a></li>
        </ul>
    </li>
</ul>

JS

<script type="text/javascript">
$('body').ready(function() {
    $('.dropdown').hover(function() {
        $(this).find('.sub_navigation').slideToggle(); 
    });
});
</script>
<script type="text/javascript">
$('body').ready(function() {
    $('.dropdown a').click(function() {
        $(this).find('.sub_navigation').show(); 
    });
});
 </script>  

请给一些提示...

谢谢

Answer 1

一个粗略的方法是：首先你应该隐藏你的 sub_navigation 即

.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");
    });
});

​</p>

请参阅此处的工作解决方案