从内部按钮创建div.show /隐藏，但让按钮保持

Question

我有一个左侧导航器，我想让它隐藏在用户命令中。

http://jsfiddle.net/Ktqbz/

的“我隐藏导航”被点击后按钮应保持可见住在同一垂直空间，当再次显示的导航祭出到原来的位置。我怎样才能做到这一点？如果需要，我可以更改html，我知道当你有display:none时，它的所有孩子都不会显示，流量也会改变，所以按钮不会停留在同一垂直位置。我也可以改变设计，所以如果你有一个更好的主意，我会全神贯注。不过，如果我将按钮从垂直位置移开，人们可能会感到困惑，这就是为什么我想保留它的原因。

Answer 1

的问题主要是你的标记。 “隐藏导航按钮”包含在#leftNavigator中，因此当您隐藏#leftNavigator时，您还隐藏了您希望保持可见的按钮。有很多方法可以修改你的标记来完成这项工作。

本质上，我只是为导航器创建了一个包装并将其定位，并且在其中定位了“我隐藏导航按钮”。我还向两个控制面板按钮添加了顶部边距，以便为“我隐藏导航”按钮留出空间。有很多方法来完成这项工作。

#leftNavigator{float:left; width:100%; background-color:red;} 
#top{height:150px; background-color:blue;} 
#controlPanel{height:50px; background-color:gray;} 
#tree{background-color:green;} 
#content{overflow:auto; background-color:coffee;} 
#btn{z-index:10;position:absolute;top:150px;} 
​#navigator_wrapper{position:relative;height:150px;width:20%} 
#controlPanel button {margin-top:25px;} 

<div id="navigator_wrapper"> 
    <button id="btn">I hide the nav</button> 
    <div id="leftNavigator"> 
     <div id="top">I have an image</div> 
     <div id="controlPanel"><button>Other</button><button>controls</button></div> 
     <div id="tree">I'm a jstree</div>  
    </div> 
</diV> 
<div id="content"> 
    I take all the space I want. Except for leftNavigator's space. 
</div>​​​​​​​​​​​​​​​ 

这里是一个jfiddle http://jsfiddle.net/samisadaka/9c7va/

Answer 2

这是Joe的小提琴的稍微不同的版本。它会通过改变opactiy来保持阻塞。

http://jsfiddle.net/Ktqbz/1/

$("#leftNavigator").animate({ 
    "opacity" : 0.0 
}); 

Answer 3

你可以解决这个问题移动<button>外div的。

我与你拨弄拨弄：http://jsfiddle.net/3Cam3/

基本上，改变你的HTML looke这样的：

<button id="btn">I hide the nav</button> 
<div id="leftNavigator"> 
    <div id="top">I have an image</div> 
    <div id="controlPanel"><button>Other</button><button>controls</button></div> 
    <div id="tree">I'm a jstree</div>  
</div> 
<div id="content"> 
    I take all the space I want. Except for leftNavigator's space. 
</div>​ 

按钮将保持固定在那里（因为它是position: absolute），而不是与div消失。