左侧导航栏可显示与隐藏用js该怎么实现？？？

当左边导航栏隐藏时，右边的工作区铺满浏览器窗口，显示时导航栏div（本人用div+css布局，不用框架）不会把右侧工作区的内容遮挡掉，也就是说右侧工作区的宽度会随着左侧导航栏显示与隐藏而发生改变。希望有人帮忙解决，万分感激！！！

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

如果没有控制右侧工作区的div宽度，直接把左侧那个div隐藏掉就可以了啊，
给你写了是测试例子，楼主再根据自己的需求改改，主要就是用过css里面的列宽度自适应来实现的，对于右边工作区，只给它设置高度，不设置宽度，左边的导航区设置高度与宽度，同时设置其左浮动，就ok了<!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>
  <div id="righter" class="right"></div>
</div>
</body>
</html>
js修复，后来发现刚打开必须连点两下才可实现上述效果，修复方案可以给#lefter加display:block也可以修复js
<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 == "none") {
lefts.style.display = "block";
rights.style.width = 600 + "px";
this.innerHTML = ">";
} else {
lefts.style.display = "none";
rights.style.width = 942 + "px";
this.innerHTML = "<";
}
}
})();
}
</script>
没解决？？没解决也来结贴呀，这么厚道。
我借用下2楼朋友的代码，做点小修改。全文如下，你直接复制去测试效果是不是你说的那种<!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">
     body{margin:0 auto;}
    #all {
      width: 100%;
      height: 800px;
      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"><input type="button" id="btn" value="隐藏导航栏"/><br />这里是其他内容，用来测试当导航菜单被隐藏时是否自适应</div>
</div></body>
<script type="text/javascript">
  $("#btn").click(function() {
    if($(this).val()=="隐藏导航栏")
    {
        $("#left").hide();
        $(this).val('显示导航栏');
    }else
    {
        $("#left").show();
        $(this).val('隐藏导航栏');
    }  });</script>
</html>