.floatWindow{ background-color:white; width:104px; height:500px; border:solid 1px red;} .list{position:relative; float:left; left:0px; background-color:lightyellow; width:100px; height:500px;} .subWindow{ position:relative; float:left; left:0px;background-color:lightblue; width:200px; height:500px; display:none;}
function showWindow(){ document.getElementById("outWindow").style.width = "302px"; //ie:border占2px document.getElementById("sub").style.display = "block"; } function hideWindow(){ document.getElementById("outWindow").style.width = "100px"; document.getElementById("sub").style.display = "none"; }
<div id="outWindow" class="floatWindow"> <div class ="list"> <input type="button" onclick="showWindow()" value="user show"/> </div> <div id="sub" class="subWindow"> <input type="button" onclick="hideWindow()" value="hide"/> </div> </div>