使用jQuery打开子菜单

Question

我有这个菜单：

我想做什么：当我点击右侧的图像按钮（＃子菜单）时，我希望它打开子菜单（.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>尝试使用以下css或类似的

时将其转换为li

ul li a {    display：inline-block;    宽度：100％;    高度：100％; }

也必须只有一个项目，其中一个ID具有多个项目是违反W3C规则的，并且单击小图标不是那么用户友好。所以请将类提供给主项li并使用该项进行点击。

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

显然你不能这样做，所以你必须将它绑定到类的第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');，以便打开/关闭列表。您可以通过尝试来看到动画的差异，并为您选择最适合的动画。

编辑点击BUG： 我不确定我是否正确，但据我所知，在某些情况下你需要重定向其他人的页面打开子菜单。 在这种情况下，您可以检查li是否有子菜单，以下代码应该可以解决问题。

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