javascript问题，实现菜单的展开，onmouseover事件

Question

左边为主菜单，右边为子菜单，当鼠标移动到主菜单上时，右边显示子菜单信息，如果能用jquery做更好

Answer 1

<div id="left">  学校要闻。。。<div> 
<div id="right" style='display:none'>  学校要闻信息内容 </div>


Jquery 写法：

$('#left').on('onmouseover', function(){ //绑定onmouseover 事件
    $('#right').css('display','block');  //显示右边子菜单
} );
$('#left').on('onmouseout', function(){ //绑定onmouseout 事件
    $('#right').css('display','none');  //鼠标移出后设置为隐藏
}

绑定onmouseover事件的同时也要绑定onmouseout 不然就会一直显示

css 那部分你可以用自己设定的 这里我用display none只是做个例子

追问

我要首次刷新莫认是第一个的子菜单呢

追答

你可以用这个
$(document).ready(function(){
$('#right').css('display','block');
});

在首次载入的时候调用 显示右边内容

当然你要把每个主菜单里面的div都要绑定一遍 onmoveover onmouseout
还要给他们唯一的id 不然无法确认移到哪个上面显示哪个

Answer 2

右边的子菜单是几个单独的隐藏的div，左边的菜单设定mouseenter事件，鼠标进入之后就显示对应的div，鼠标离开对应的div设为不可见，就这么简单

Answer 3

百度搜索jquery导航菜单插件