Javascript 在页面加载jquery上隐藏子菜单

我创建了一个带有子菜单的垂直菜单。我使用了一个无序列表。当我的页面加载时，它会显示顶级菜单和子菜单，但当我单击顶级菜单时，它会隐藏子菜单，该子菜单在单击事件中运行良好。我想我的网页只显示顶级菜单，只有一次点击将显示子菜单。我是jquery的新手，非常感谢您的帮助

$（函数（）{
$（“#菜单a”）。单击（函数（事件）{
var elem=$（this.next（）；
如果（要素是（'ul'））{
event.preventDefault（）；
$（“#菜单ul:visible”）.not（elem.slideUp（）；
元素滑动切换（）；
}
});
});
#菜单{
填充：0；
保证金：0；
列表样式类型：无；
字体大小：13px；
颜色：#717171；
宽度：100%；
}
#菜单里{
边框底部：1px实心#eeeee；
}
#菜单a：悬停{
颜色：白色；
背景色：#ffcc00；
}
#菜单a：链接{
颜色：#717171；
文字装饰：无；
显示：块；
填充：7px 10px；
}
#菜单a：悬停{
颜色：白色；
}
#菜单{
填充：0；
保证金：0；
列表样式类型：无；
背景色：#999；
}




































隐藏子菜单以CSS开头

#menu li ul
{
    display: none; /* hide sub uls */
    padding:0;
    margin:0;
    list-style-type:none;
    background-color:#999;
}

css可以在没有javascript的情况下做到这一点。将
ul
子菜单设置为
display:none

#menu li ul
{
     padding:0;
     margin:0;
     list-style-type:none;
     background-color:#999;
     display: none;
}

感谢您的反馈。