javascript - 使用 jQuery 打开子菜单

Question

我有这个菜单:

我想做什么:当我点击右边的图像按钮(#sub-menu)时，我希望它打开子菜单(.sports2)。

这是一个子元素的html代码示例:

                <a href="#"><li> Golf  
                    <img src="strokesmenu.png"  id="sub-menu" />
                    <ul class="sports2">
                        <a href="#" class="selected"><li>British Open</li></a>
                        <a href="#" class="selected"><li>Masters</li></a>
                        <a href="#" class="selected"><li>PGA Championship</li></a>
                        <a href="#" class="selected"><li>US Open</li></a>
                    </ul>
                </li></a>

为什么这段代码对我不起作用？

$('#sub-menu').click(function(){
    //$('.sports2').slideToggle("slow");
    $(this).find('ul>li').slideToggle(slow);
})

Answer 1

首先，<a href="#" class="selected"><li>British Open</li></a>这种结构是错误的，我什至无法描述它有多错误。

将其转换为 <li><a href="#" class="selected">British Open</a></li>如果你想在 li 时可以点击尝试使用下面的 css 或类似的

ul li a { 显示:内联 block ； 宽度:100%； 高度:100%；

而且必须只有一个 id 的元素有多个是违反 W3C 规则的，点击小图标对用户来说不是那么友好。所以改为给主要元素上课 li并处理那个点击。

$('li.main').click(function(){
    $(this).find('ul').slideToggle('slow');
})

显然你不能这样做，所以你必须将它绑定(bind)到 img首先将 id 更改为类，例如class="sub-menu"

$('li img.sub-menu').click(function(){
    //$(this) -> img .next() -> ul
    $(this).next().slideToggle('slow');
})

现在 $(this).find('ul>li').slideToggle('slow');应该可以，但它会每隔 li 打开一次并可能导致一些问题。

相反，我建议使用 $(this).find('ul').slideToggle('slow');因此可以打开/关闭列表。您可以通过尝试看到动画的差异，然后选择最适合您的动画。

编辑点击错误: 我不确定我是否做对了，但据我了解，在某些情况下您需要重定向页面，而在其他情况下打开子菜单。 在这种情况下，您可以检查 li 是否有子菜单，下面的代码应该可以解决问题。

$('li.main').click(function(){
    if ($(this).has("ul")) // if has submenu
        $(this).find('ul>li').slideToggle('slow');
     else
        // your redirect code.
})