JQuery纵向菜单的问题

Question

// JavaScript Document
$(document).ready(function(){
var mainNode=$(".main>a");
                  
//页面中的DOM已经装载完成时，执行的代码
mainNode.click(function(){
//找到主菜单项对应的子菜单项
var ulNode=$(this).next("ul");
                           //点击的该节点显示或隐藏。
ulNode.slideToggle();
                           //希望其他没有点击的节点自动隐藏
//图标切换方法
changeIcon($(this));

});
//取到未点击的菜单
                   //我要实现点击某个菜单时，它就显示，其他节点如果是显示状态，就变成隐藏。 $(".hmain").hover(function(){
$(this).children("ul").slideDown();
changeIcon($(this).children("a"));
},function(){
$(this).children("ul").slideUp();
changeIcon($(this).children("a"));
});
});
/*修改主菜单的指示图标*/
function changeIcon(mainNode)
{
if(mainNode)
{
if(mainNode.css("background-image").indexOf("arrow_on.gif")>=0)
{
mainNode.css("background-image","url('images/arrow_off.gif')");
}else
{
mainNode.css("background-image","url('images/arrow_on.gif')");
}
}
}//希望其他没有点击的节点自动隐藏
怎么实现？

Answer 1

$(document).ready(function(){
var mainNode=$(".main>a");
    
//页面中的DOM已经装载完成时，执行的代码
mainNode.click(function(){ 
//找到主菜单项对应的子菜单项
var ulNode=$(this).next("ul");
  //点击的该节点显示或隐藏。
ulNode.slideToggle();
  //希望其他没有点击的节点自动隐藏
//图标切换方法
urlNode.parent(".main").each(function(index1,dom){
$(".main").each(function(index,domEl){
if(dom == domEl){

}else{
$(domEl).children("ul").hide();
}
});
});changeIcon($(this));});
//取到未点击的菜单
  //我要实现点击某个菜单时，它就显示，其他节点如果是显示状态，就变成隐藏。$(".hmain").hover(function(){
$(this).children("ul").slideDown();
changeIcon($(this).children("a"));
},function(){
$(this).children("ul").slideUp();
changeIcon($(this).children("a"));
});
});
/*修改主菜单的指示图标*/
function changeIcon(mainNode)
{
if(mainNode)
{
if(mainNode.css("background-image").indexOf("arrow_on.gif")>=0)
{
mainNode.css("background-image","url('images/arrow_off.gif')");
}else
{
mainNode.css("background-image","url('images/arrow_on.gif')"); 
}
} 
}
加上上面代码即可