0

我正在使用一个简单的 Jquery 下拉菜单，在这里可以找到http://wabism.com/jquery-drop-down-menu-tutorial/

我只是想知道如何让链接触发菜单保持突出显示，同时将鼠标悬停在下拉列表中的链接上。另外，只让顶级菜单的链接触发动画而不是整个 li 类......

有人帮我修复了禁用动画重复的代码。所以我用这个替换了默认插件代码//

$('body').ready(function() {
$('.dropdown').hover(function() {
if ($(this).find('.sub_navigation').is(":visible")) {
$(this).find('.sub_navigation').slideUp();} else {
$(this).find('.sub_navigation').slideDown();}
});
});

这是一个小提琴// http://jsfiddle.net/tUYfw/90/

4

4 回答 4

1

我只是想知道如何让链接触发菜单保持突出显示，同时将鼠标悬停在下拉列表中的链接上。

.dropdown:hover > a {
  background-color: #ccc;
}

由于.dropdown列表项包含整个下拉菜单，因此只要光标与下拉菜单交互，它将始终悬停在上方。但是我们不希望整个列表项都有灰色背景，只有链接。所以我们使用直接子选择器来设置父链接的样式。

另外，只让顶级菜单的链接触发动画而不是整个 li 类......

这有点棘手，因为悬停在整个父列表项上的行为是允许下拉菜单保持打开状态的原因。

为什么只需要链接来激活菜单？如果你解释你的推理，也许我们可以建议一个更好的选择。

于 2012-10-23T16:36:10.143 回答
0 
$('body').ready(function() {
    $('.dropdown a').bind('onmouseover',function() {
        $this = $(this).closest('.dropdown');
        $this.find('.sub_navigation').slideDown();
    });
});​

http://jsfiddle.net/mblase75/T6mhX/

http://api.jquery.com/closest

于 2012-10-23T16:14:49.800 回答
0

您可以更改选择器以选择锚标记，然后修改 jQuery 代码以改用 parentNode。

$('body').ready(function() {
    $('.dropdown a').hover(function() {
        if ($(this.parentNode).find('.sub_navigation').is(":visible")) {
            $(this.parentNode).find('.sub_navigation').slideUp();
        } else {
            $(this.parentNode).find('.sub_navigation').slideDown();
        }
    });
});​

更新了 jsfiddle：http: //jsfiddle.net/tUYfw/93/

于 2012-10-23T16:16:19.913 回答
0

如果所有 .dropdowns 都是等效的，则可以使用第一个子选择器仅对第一个选择器执行某些操作

$('.dropdown:first-child').hover(function() {...

http://api.jquery.com/first-child-selector/

于 2012-10-23T16:24:06.960 回答