js 一级菜单纵向的，二级菜单横向的问题
需求：一级菜单是纵向排列的，点击一级菜单的话，旁边会展开横向二级菜单。（内容领域显示不同内容）请求大神：html，css，js能帮我写一段代码吗？先谢谢了。拜托了。自己试...
需求：
一级菜单是纵向排列的，
点击一级菜单的话，旁边会展开横向二级菜单。（内容领域显示不同内容）
请求大神：html，css，js能帮我写一段代码吗？先谢谢了。拜托了。
自己试着做了，可是点击《按钮2》的时候该DIV跑到上面去了，能指点下怎么回事吗？谢谢了。具体代码是：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><title></title><style>
.bbb1{ width: 300px; height: 20px; display:none; background-color:#33CCFF;}.bbb2{ width: 300px; height: 20px;display:none; background-color:#33CCFF;}.body_menubar{ width:100px; min-height:300px; background-color:#33CCFF;}</style><script>//菜单隐藏显示function show(memu){ if(document.getElementById(memu).style.display=='block'){ document.getElementById(memu).style.display='none'; } else{document.getElementById(memu).style.display='block'; }}</script></head><body> <div class="body_menubar" style="float:left;"> <div class="test" style="position: absolute; z-index:2;"> <div> <div class="aaa1" id="btn" style="float:left"> <a href="javascript:onClick=show('memu1')"> 按钮1</a> </div> <div class="bbb1" id="memu1"> <a href="javascript:onClick=f1(1);"> 菜单1</a> <a href="javascript:onClick=f1(2);"> 菜单2</a> </div> </div> <div> <div class="aaa2" id="btn" style="float:left"> <a href="javascript:onClick=show('memu2')"> 按钮2</a> </div> <div class="bbb2" id="memu2"> <a href="javascript:onClick=f1(1);"> 菜单1</a> <a href="javascript:onClick=f1(2);"> 菜单2</a> </div> </div> </div> </div></body></html> 展开
一级菜单是纵向排列的，
点击一级菜单的话，旁边会展开横向二级菜单。（内容领域显示不同内容）
请求大神：html，css，js能帮我写一段代码吗？先谢谢了。拜托了。
自己试着做了，可是点击《按钮2》的时候该DIV跑到上面去了，能指点下怎么回事吗？谢谢了。具体代码是：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><title></title><style>
.bbb1{ width: 300px; height: 20px; display:none; background-color:#33CCFF;}.bbb2{ width: 300px; height: 20px;display:none; background-color:#33CCFF;}.body_menubar{ width:100px; min-height:300px; background-color:#33CCFF;}</style><script>//菜单隐藏显示function show(memu){ if(document.getElementById(memu).style.display=='block'){ document.getElementById(memu).style.display='none'; } else{document.getElementById(memu).style.display='block'; }}</script></head><body> <div class="body_menubar" style="float:left;"> <div class="test" style="position: absolute; z-index:2;"> <div> <div class="aaa1" id="btn" style="float:left"> <a href="javascript:onClick=show('memu1')"> 按钮1</a> </div> <div class="bbb1" id="memu1"> <a href="javascript:onClick=f1(1);"> 菜单1</a> <a href="javascript:onClick=f1(2);"> 菜单2</a> </div> </div> <div> <div class="aaa2" id="btn" style="float:left"> <a href="javascript:onClick=show('memu2')"> 按钮2</a> </div> <div class="bbb2" id="memu2"> <a href="javascript:onClick=f1(1);"> 菜单1</a> <a href="javascript:onClick=f1(2);"> 菜单2</a> </div> </div> </div> </div></body></html> 展开
1个回答
展开全部
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.bbb1{
width: 300px;
height: 20px;
display:none;
background-color:#33CCFF;
}
.bbb2{
width: 300px;
height: 20px;
display:none;
background-color:#33CCFF;
}
.body_menubar{ width:100px; min-height:300px; background-color:#33CCFF;}
</style>
<script>
//菜单隐藏显示
function show(memu){
if(document.getElementById(memu).style.display=='block'){
document.getElementById(memu).style.display='none';
}
else{document.getElementById(memu).style.display='block';
}
}
</script>
</head>
<body>
<div class="body_menubar" style="float:left;">
<div class="test" style="position: absolute; z-index:2;">
<div>
<div class="aaa1" id="btn" style="float:left">
<a href="javascript:onClick=show('memu1')"> 按钮1</a>
</div>
<div class="bbb1" id="memu1">
<a href="javascript:onClick=f1(1);"> 菜单1</a>
<a href="javascript:onClick=f1(2);"> 菜单2</a>
</div>
</div>
<div style="clear:both"></div>
<div>
<div class="aaa2" id="btn" style="float:left">
<a href="javascript:onClick=show('memu2')"> 按钮2</a>
</div>
<div class="bbb2" id="memu2">
<a href="javascript:onClick=f1(1);"> 菜单1</a>
<a href="javascript:onClick=f1(2);"> 菜单2</a>
</div>
</div>
</div>
</div>
</body>
</html>
浮动没清除的问题而已，已经帮你加了
<html>
<head>
<title></title>
<style>
.bbb1{
width: 300px;
height: 20px;
display:none;
background-color:#33CCFF;
}
.bbb2{
width: 300px;
height: 20px;
display:none;
background-color:#33CCFF;
}
.body_menubar{ width:100px; min-height:300px; background-color:#33CCFF;}
</style>
<script>
//菜单隐藏显示
function show(memu){
if(document.getElementById(memu).style.display=='block'){
document.getElementById(memu).style.display='none';
}
else{document.getElementById(memu).style.display='block';
}
}
</script>
</head>
<body>
<div class="body_menubar" style="float:left;">
<div class="test" style="position: absolute; z-index:2;">
<div>
<div class="aaa1" id="btn" style="float:left">
<a href="javascript:onClick=show('memu1')"> 按钮1</a>
</div>
<div class="bbb1" id="memu1">
<a href="javascript:onClick=f1(1);"> 菜单1</a>
<a href="javascript:onClick=f1(2);"> 菜单2</a>
</div>
</div>
<div style="clear:both"></div>
<div>
<div class="aaa2" id="btn" style="float:left">
<a href="javascript:onClick=show('memu2')"> 按钮2</a>
</div>
<div class="bbb2" id="memu2">
<a href="javascript:onClick=f1(1);"> 菜单1</a>
<a href="javascript:onClick=f1(2);"> 菜单2</a>
</div>
</div>
</div>
</div>
</body>
</html>
浮动没清除的问题而已，已经帮你加了
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
