0

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

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

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

谢谢

4

2 回答 2

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/

于 2012-11-16T15:33:45.743 回答
0

如果使用 jQuery 解决方案，我至少建议.stop()在 the 之前添加一个.slideUp()以解决可能导致动画排队的任何鼠标移动。所以这段代码到底

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

在这里摆弄 http://jsfiddle.net/QEWvm/4/

但是，这种方法的问题在于它不可访问，因为屏幕阅读.hide()器display:none会忽略它。

更好的解决方案（如果你可以在没有动画的情况下生活，或者想使用 CSS3 来解决它们）将使用定位和伪类来实现类似这样的东西

#submenu > li.parent > ul { position: absolute; left: -9999px; }

#submenu li.parent:hover ul {
  left: 90px;          
}

这个小提琴http://jsfiddle.net/QEWvm/5/显示它工作。

于 2012-11-16T15:48:52.687 回答