Question

我有一个新问题。我想为我的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");
});

但是如果用户使用鼠标远离菜单，我不知道如何关闭子菜单。我想在显示子菜单之前关闭其他openend菜单。有人能帮助我吗？

由于

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/

Answer 2

如果使用jQuery解决方案，我至少会建议在.stop()之前添加.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/显示它有效。

使用jQuery为Joomla创建一个子菜单

2 个答案: