简单JQuery手风琴菜单

嗨，我在wordpress网站上有一个手风琴菜单。该主题附带的标准菜单没有达到我想要的效果，因此我尝试对其进行定制

javascript代码是

//DROPDOWN SCRIPT
$("#navbar > li").click(function(){
if(false == $(this).next().is(':visible')) {
    $('#navbar > ul').slideUp(300);
}
$(this).next().slideToggle(300);
});
$('#navbar > ul:eq(0)').show();

css是

#navbar {
list-style: none;
padding: 0 0 0 0;
width: 233px;
}

#navbar li{
text-align:center;
display: block;
font-weight: bold;
margin-bottom: 2px;
cursor: pointer;
list-style: circle;
height:29px;
line-height:normal;
}

#navbar ul {

list-style: none;
padding: 0 0 0 0;
display: none;

}

#navbar ul li{

font-weight: normal;
cursor: auto;
background-color: #fff;
padding: 0 0 0 7px;
line-height:normal;

}

#navbar a {
padding-top:5px;
text-decoration: none;
font-size: 19px;


}

#navbar a:hover {


}
#navbar li:first-child
{margin:2px 0 2px 0;
background:url(images/menuBG.png) 0px -90px;}

#menu-item-12{
background:url(images/menuBG.png) 0px -126px;}
#menu-item-13{
background:url(images/menuBG.png) 0px -163px;}
#menu-item-14{
background:url(images/menuBG.png) 0px -200px;}
#menu-item-15{
background:url(images/menuBG.png) 0px -236px;}
#menu-item-16{
background:url(images/menuBG.png) 0px -272px;}
#menu-item-17{
background:url(images/menuBG.png) 0px -344px;}
#menu-item-18{
background:url(images/menuBG.png) 0px -380px;}
#menu-item-30{
background:url(images/menuBG.png) 0px -416px;}
#menu-item-19{
background:url(images/menuBG.png) 0px -452px;}

#navbar li#menu-item-12 a, #navbar li#menu-item-13 a,#navbar li#menu-item-14 a, 
#navbar li#menu-item-29 a {
color:#76a443   }

HTML是

<ul id="navbar" class="menu">
<li id="menu-item-29" class="menu-item menu-item-type-custom
 menu-item-object-custom firstmenuitem"><a href="http://#" class="item"> Pests </a></li>
<li id="menu-item-51" class="menu-item menu-item-type-custom menu-item-object-custom">
<a> Products </a>
<ul class="sub-menu">
<li id="menu-item-22" class="menu-item menu-item-type-custom menu-item-object-custom">
<a href="#" class="item">Nemaslug</a></li>
<li id="menu-item-23" class="menu-item menu-item-type-custom menu-item-object-custom">
<a href="#" class="item">Vine Weevile Killer</a></li>
<li id="menu-item-24" class="menu-item menu-item-type-custom menu-item-object-custom">
<a href="#" class="item">NO ANTS!</a></li>
<li id="menu-item-25" class="menu-item menu-item-type-custom menu-item-object-custom">
<a href="#" class="item">Grow Your Own</a></li>
<li id="menu-item-52" class="menu-item menu-item-type-custom menu-item-object-custom">
<a href="http://LeatherJacketKiller" class="item">LeatherJacket Killer</a></li>
</ul>
</li>
<li id="menu-item-13" class="menu-item menu-item-type-custom menu-item-object-custom">
<a href="#" class="item"> Damage Identifier </a></li>
<li id="menu-item-14" class="menu-item menu-item-type-custom menu-item-object-custom">
<a href="#" class="item"> Pest Identifier </a></li>
<li id="menu-item-15" class="menu-item menu-item-type-custom menu-item-object-custom">
<a href="#" class="item"> About Nematodes </a></li>
<li id="menu-item-16" class="menu-item menu-item-type-custom menu-item-object-custom">
<a href="#" class="item"> Where to Buy </a></li>
<li id="menu-item-17" class="menu-item menu-item-type-custom menu-item-object-custom">
<a href="#" class="item"> Gardeners Forum </a></li>
<li id="menu-item-18" class="menu-item menu-item-type-custom menu-item-object-custom">
<a href="#" class="item"> Downloads </a></li>
<li id="menu-item-30" class="menu-item menu-item-type-custom menu-item-object-custom">
<a href="http://#" class="item"> News </a></li>
<li id="menu-item-19" class="menu-item menu-item-type-custom menu-item-object-custom
lastmenuitem"><a href="#" class="item"> Links </a></li>
</ul>               
<!-- Navbar ends here -->   
</div>
<!-- Menu ends here -->

它没有正常工作，它隐藏了下面的链接，而不是显示其子链接，如果你点击“产品”链接，你会看到我的意思，产品中有5个子类别。但它却隐藏了它下面的顶级类别

该网站也有一个测试url

试试这个

Css代码

#navbar li{
    text-align:center;
    font-weight: bold;
    margin-bottom: 2px;
    cursor: pointer;
    list-style: circle;
    height:29px;
    line-height:normal;
    display: table;
    width: 100%;
}

Js代码：

$("#navbar > li").click(function(){
  var child = '#' + $(this).attr('id') + ' > ul';
    $(child).slideToggle();
});
$('#navbar > ul:eq(0)').show();

看到这个了吗

---

问候。

很抱歉，我想说的是它功能不正常，它隐藏了下面的链接，而不是显示其子链接，如果您单击产品，您将看到我的意思您好，将css更改为您建议的内容只需关闭所有顶级链接，而不是打开以显示子级别链接：-（@user1475110再次看到答案。。。greetings@user1475110我很高兴能帮你做一件事。我现在添加了另一个子菜单，当我点击任何一个链接时，两个子菜单都打开了，我如何使它只打开所选的一个子菜单？如果你还在，我真的可以在你的帮助下做