jquery - 制作一个 div.show/hide from insider 按钮，但让按钮保留

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/