如果单击父菜单，则jQuery显示子菜单。

Question

请问有人能帮忙编写代码吗？

我想要只在点击子菜单的父级菜单时才显示子菜单。

HTML

<ul>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a>
    <ul class="sub-menu">
        <li><a href="#">Submenu</a></li>
        <li><a href="#">Submenu</a></li>
    </ul>
</li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a>
    <ul class="sub-menu">
        <li><a href="#">Submenu</a></li>
        <li><a href="#">Submenu</a></li>
    </ul>
</li>
<li><a href="#">Item</a></li>
</ul>

如果您点击父菜单，子菜单将显示。

这是一个fiddle链接 - http://jsfiddle.net/KhNCV/1/

- Kaspars Milbergs

Answer 1

$('.sub-menu').hide();

$("li:has(ul)").click(function(){

$("ul",this).slideDown();
});

http://jsfiddle.net/3nigma/KhNCV/2/

OR

$('.sub-menu').hide();

$("li:has(ul)").click(function(){

$("ul",this).toggle('slow');
});

http://jsfiddle.net/3nigma/KhNCV/4/

- Rafay

---

不错，但如何隐藏最后点击的子菜单。现在它显示了两个。 - Naren Verma

Answer 2

这是你的示例。不清楚为什么需要a标签，因为你可以在CSS中使用cursor: pointer使li看起来可点击。我假设你想在IE上进行一些花哨的悬停效果，只使用CSS？如果不是，请简化并删除它们。

不要对.submenu使用hide()，应该使用CSS（通过DOM解析而非onReady/load）。

.sub-menu { display: none; }

以下是切换菜单的代码：

$('ul li a').click(function() {
    $(this).parent().find('ul.sub-menu').toggle();
    return false;
});

- Kato

---

但是如何隐藏先前的子菜单，因为现在两个都显示出来了。 - Naren Verma

Answer 3

$('.sub-menu').hide();

$("a").click(function(){

    $(this).parent().children("ul").toggle();

})

请查看这个链接 http://jsfiddle.net/KhNCV/6/

- erimerturk

Answer 4

$('li a').click(
function() {
    $(this).next().slideToggle();
})

- Paul Kearney - pk

Answer 5

试试这个

$(function(){

   //Hide all the sub menus
   $('.sub-menu').hide();

   $("li:has(ul)").click(function(){
      //Find the child ul and slideToggle
      $(this).children("ul").slideToggle();
   });
});

- ShankarSangoli