Question

我是jQuery的新手，所以请耐心等待。我试图让我的子菜单显示在悬停状态。第二组<ul>用于子菜单。

$(document).ready(function(){
    $('ul.menu.li').hover(
        function() { $('ul', this).css('display', 'block'); },
        function() { $('ul', this).css('display', 'none'); });
});

<ul id="menu">
<li><a href="#">Item 1</a><li>
<ul>
<li>Hi</li>
</ul>
<li><a href="#">Item 2</a></li>
</ul>

Answer 1

你的选择器错了。您需要通过ID引用父UL，而不是 class ：

$('#menu li').hover(...

此外，如果您要在UL内解决LI，您想使用ancestor-descendant或parent > child：

$('#menu li') // ancestor descendant
$('#menu > li') // parent > child

此外，设置CSS显示属性没有意义，只需：

$(document).ready(function(){
    $('#menu li').hover(
        function() { $('ul', this).show(); },
        function() { $('ul', this).hide(); });
});

Answer 2

这里有一些事情，首先选择器应该是ul#menu li，因为menu是id而不是class（类选择器使用.class）。也是一个空格，否则它正在寻找<ul>与class="menu li"匹配。

然后，您的<ul>需要成为<li>的孩子而不是兄弟姐妹，就像这样：

<ul id="menu">
<li><a href="#">Item 1</a>
    <ul>
    <li>Hi</li>
    </ul>
</li>
<li><a href="#">Item 2</a></li>
</ul>

最后，您还可以添加一些天赋，如下所示：

$('ul#menu li').hover(function() { 
    $('ul', this).slideDown(); 
}, function() {
    $('ul', this).slideUp(); 
});

这也会创建滑动效果that you can see here

这个子菜单没有出现我做错了什么？

2 个答案: