左侧导航栏可显示与隐藏用js该如何实现？
日期：2014-05-16 浏览次数：20310 次
左侧导航栏可显示与隐藏用js该怎么实现？？？
当左边导航栏隐藏时，右边的工作区铺满浏览器窗口，显示时导航栏div（本人用div+css布局，不用框架）不会把右侧工作区的内容遮挡掉，也就是说右侧工作区的宽度会随着左侧导航栏显示与隐藏而发生改变。希望有人帮忙解决，万分感激！！！
------解决方案--------------------
如果没有控制右侧工作区的div宽度，直接把左侧那个div隐藏掉就可以了啊，
------解决方案--------------------
给你写了是测试例子，楼主再根据自己的需求改改，主要就是用过css里面的列宽度自适应来实现的，对于右边工作区，只给它设置高度，不设置宽度，左边的导航区设置高度与宽度，同时设置其左浮动，就ok了
当左边导航栏隐藏时，右边的工作区铺满浏览器窗口，显示时导航栏div（本人用div+css布局，不用框架）不会把右侧工作区的内容遮挡掉，也就是说右侧工作区的宽度会随着左侧导航栏显示与隐藏而发生改变。希望有人帮忙解决，万分感激！！！
------解决方案--------------------
如果没有控制右侧工作区的div宽度，直接把左侧那个div隐藏掉就可以了啊，
------解决方案--------------------
给你写了是测试例子，楼主再根据自己的需求改改，主要就是用过css里面的列宽度自适应来实现的，对于右边工作区，只给它设置高度，不设置宽度，左边的导航区设置高度与宽度，同时设置其左浮动，就ok了
- HTML code
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>测试</title>
<script type="text/javascript"src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<style type="text/css">
#all {
width: 400px;
height: 400px;
background: red;
margin: auto;
}
#left {
width: 10%;
height: 100%;
float: left;
background: #8a2be2;
}
#right {
background: #e6e6e6;
height: 100%;
}
</style>
</head>
<body>
<div id="all">
<div id="left"></div>
<div id="right"></div>
</div>
<button id="btn">按钮</button>
<button id="btn2">按钮2</button>
</body>
<script type="text/javascript">
$("#btn").click(function() {
$("#left").css({width : 0});
});
$("#btn2").click(function() {
$("#left").css({width : "10%"});
});
</script>
</html>
------解决方案--------------------
------解决方案--------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#container {
width:960px;
margin:0 auto;
}
.left { float:left; }
.right { float:right; }
#lefter {
width:340px;
height:100px;
border:1px solid #666;
}
#btn {
width:10px;
height:50px;
border:1px solid #666;
background-color:#666;
padding:25px 0;
cursor:pointer;
}
#righter {
width:600px;
height:100px;
border:1px solid #666;
}
</style>
<script type="text/javascript">
window.onload = function() {
(function() {
document.getElementById("btn").onclick = function() {
var lefts = document.getElementById("lefter");
var rights = document.getElementById("righter");
if (lefts.style.display == "block") {
lefts.style.display = "none";
rights.style.width = 942 + "px";
this.innerHTML = ">";
} else {
lefts.style.display = "block";
rights.style.width = 600 + "px";
this.innerHTML = "<";
}
}
})();
}
</script>
</head>
<body>
<div id="container">
<div id="lefter" class="left"></div>
<div id="btn" class="left"><</div>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
