0

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

http://jsfiddle.net/Ktqbz/

单击“我隐藏导航”按钮后，该按钮应保持可见，并保持在相同的垂直空间，并在再次显示导航时将其重新定位到原始位置。我怎样才能做到这一点？如果需要，我可以更改 html，我知道当您拥有 html 时display:none，不会显示其子级，流程也会更改，因此按钮不会停留在同一垂直位置。我也可以更改设计，所以如果您有更好的想法，我会全神贯注。但是，这应该对用户尽可能友好，如果我将按钮从其垂直位置移动，人们可能会感到困惑，这就是我想保留它的原因。

4

3 回答 3

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;}

​</p> 

<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/

于 2012-08-02T14:42:31.587 回答
1

您可以解决<button>将div.

我摆弄着你的小提琴：http: //jsfiddle.net/3Cam3/

基本上，将您的 HTML 更改为如下所示：

<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.

于 2012-08-02T14:44:09.210 回答
1

这是乔的小提琴的一个稍微不同的版本。它将通过仅更改 opactiy 来保留阻塞。

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

$("#leftNavigator").animate({
    "opacity" : 0.0
});
于 2012-08-02T14:39:59.873 回答