jquery - 使用 jQuery for Joomla 创建子菜单

Question

我有一个新问题。 我想用 jquery 为我的 joomla 网站创建一个子菜单。 菜单如下所示:

<ul id="submenu">
    <li><a href="#">Link</a></li>
    <li class="parent">
        <a href="#">Submenu 1</a>
        <ul>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
        </ul>
    </li>
    <li class="parent">
        <a href="#">Submenu 2</a>
        <ul>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
        </ul>
    </li>
        <li class="parent">
        <a href="#">Submenu 3</a>
        <ul>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
        </ul>
    </li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
</ul>

所以并不是所有的元素都有子元素。 我怎样才能做到这一点？ 我试过这样:

// hide all elements onload 
$("#submenu > li.parent > ul").hide();

$("#submenu li.parent").hover(function() {
    $(this).find("ul").slideDown("slow");
});

但是我不知道如果用户用鼠标离开菜单我该如何关闭子菜单。 我想在显示子菜单之前关闭其他开放式菜单。 谁能帮帮我？

谢谢

Answer 1

您可以使用mouseenter/mouseleave

$("#submenu li.parent").mouseenter(function() {
     $(this).find("ul").slideDown("slow");
}).mouseleave(function() {
     $(this).find("ul").slideUp("Slow");
});​

但我最好选择纯 CSS 解决方案。

http://jsfiddle.net/QEWvm/

CSS3 示例解决方案:http://jsfiddle.net/qzP7s/