Question

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

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

我尝试了这个，但它没有用......

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

请参阅工作解决方案here

jQuery下拉菜单 - 点击可见

1 个答案: