关于上拉菜单无法自动隐藏的有关问题
日期：2014-05-16 浏览次数：20271 次
关于下拉菜单无法自动隐藏的问题
向各位大神求助：
下拉菜单默认隐藏，默认显示“选项1”，点击“选项1”显示菜单，点击其他选项，div显示相关内容后自动隐藏菜单，菜单显示其他选项名称。
现在代码是点击菜单其他选项，div内容有显示相关内容，但是菜单没有自动隐藏。
请教下该怎么写？
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>首页</title>
<script type="text/javascript" src="http://jquery.jask.cn/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#options').hide();
$('#settings').click(function(){
$('#options').slideToggle();
$(this).toggleClass("cerrar");
});
});
function a(index){
var div=document.getElementById('list');
var divs=list.getElementsByTagName('div');
for(var i=0;i<divs.length;i++){
divs[i].style.display="none";
}
divs[index-1].style.display="block";
}
</script>
<style>
*{ padding:0; margin:0; border:0;}
a{ text-decoration:none;}
#header {position:absolute;top:0; left:0;width:100%;height:69px;background: #333;text-align:center;}
#header span {font-size:2em; line-height:2.2em;text-align:center;color:white; width:200px; float:left; position:relative; left:28%; }
#settings {width: 110px; height:65px; float:right; position:fixed; top:1px; right:0; color:white; font-size:1.4em; line-height:2.9em; display: block;border-left:#b10000 solid 2px; z-index:3; text-align: center;}
.cerrar {background: #c40000 ; borer-bottom:#c40000 solid 2px;line-height:3em; z-index:3;}
#options {position:fixed; top:66px; left:0; width:100%; background:#c40000; z-index:100; border-top:#960000 solid 1px;border-bottom:#960000 solid 1px; text-align:center;}
.cur{ background: #333;}
.cur,.navlink {width:100%; height:60px; line-height:60px; color: white; text-decoration: none; border-bottom: #b00303 solid 1px; border-top: #dc0c0c solid 1px; font-size:1.4em;}
.liststyle{ position:absolute; top:300px; font-size:44px; }
</style>
</head>
<body>
<div id="header"></div>
<div id="settings">选项1</div>
<ul id="options">
<li onClick="a(1)" class="cur">选项1</li>
<li onClick="a(2)" class="navlink">选项2</li>
<li onClick="a(3)" class="navlink">选项3</li>
</ul>
<div id="list" class="liststyle">
<div id="demo1" style="display:block;">aaaaaaaaaaaaa</div>
<div id="demo2" style="display:none;">bbbbbbbbbbbbbb</div>
<div id="demo3" style="display:none;">ccccccccccccc</div>
</div>
</body>
</html>
------解决方案--------------------
LZ既然用了jQuery就不要用document.getElementById的了，把li的onclick和function a 去了，直接用jQuery绑定，下面红色是添加的一些代码。LZ可以拷贝下面的全部代码运行一下，看下是不是你要的效果。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>首页<
向各位大神求助：
下拉菜单默认隐藏，默认显示“选项1”，点击“选项1”显示菜单，点击其他选项，div显示相关内容后自动隐藏菜单，菜单显示其他选项名称。
现在代码是点击菜单其他选项，div内容有显示相关内容，但是菜单没有自动隐藏。
请教下该怎么写？
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>首页</title>
<script type="text/javascript" src="http://jquery.jask.cn/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#options').hide();
$('#settings').click(function(){
$('#options').slideToggle();
$(this).toggleClass("cerrar");
});
});
function a(index){
var div=document.getElementById('list');
var divs=list.getElementsByTagName('div');
for(var i=0;i<divs.length;i++){
divs[i].style.display="none";
}
divs[index-1].style.display="block";
}
</script>
<style>
*{ padding:0; margin:0; border:0;}
a{ text-decoration:none;}
#header {position:absolute;top:0; left:0;width:100%;height:69px;background: #333;text-align:center;}
#header span {font-size:2em; line-height:2.2em;text-align:center;color:white; width:200px; float:left; position:relative; left:28%; }
#settings {width: 110px; height:65px; float:right; position:fixed; top:1px; right:0; color:white; font-size:1.4em; line-height:2.9em; display: block;border-left:#b10000 solid 2px; z-index:3; text-align: center;}
.cerrar {background: #c40000 ; borer-bottom:#c40000 solid 2px;line-height:3em; z-index:3;}
#options {position:fixed; top:66px; left:0; width:100%; background:#c40000; z-index:100; border-top:#960000 solid 1px;border-bottom:#960000 solid 1px; text-align:center;}
.cur{ background: #333;}
.cur,.navlink {width:100%; height:60px; line-height:60px; color: white; text-decoration: none; border-bottom: #b00303 solid 1px; border-top: #dc0c0c solid 1px; font-size:1.4em;}
.liststyle{ position:absolute; top:300px; font-size:44px; }
</style>
</head>
<body>
<div id="header"></div>
<div id="settings">选项1</div>
<ul id="options">
<li onClick="a(1)" class="cur">选项1</li>
<li onClick="a(2)" class="navlink">选项2</li>
<li onClick="a(3)" class="navlink">选项3</li>
</ul>
<div id="list" class="liststyle">
<div id="demo1" style="display:block;">aaaaaaaaaaaaa</div>
<div id="demo2" style="display:none;">bbbbbbbbbbbbbb</div>
<div id="demo3" style="display:none;">ccccccccccccc</div>
</div>
</body>
</html>
js
jq
------解决方案--------------------
LZ既然用了jQuery就不要用document.getElementById的了，把li的onclick和function a 去了，直接用jQuery绑定，下面红色是添加的一些代码。LZ可以拷贝下面的全部代码运行一下，看下是不是你要的效果。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>首页<
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
