0

ユーザーコマンドで非表示にしたい左側のナビゲーターがあります。

http://jsfiddle.net/Ktqbz/

[ナビゲーションを非表示にする]ボタンは、クリックした後も同じ垂直方向のスペースにとどまり、ナビゲーションが再度表示されたときに元の場所に再配置されたまま表示されたままになります。どうすればこれを達成できますか？必要に応じてhtmlを変更できます。存在する場合display:none、その子は表示されず、フローも変更されるため、ボタンは同じ垂直位置に留まりません。私もデザインを変更できるので、もっと良いアイデアがあれば私はすべての耳です。ただし、これはユーザーにとってできるだけ使いやすいものにする必要があります。ボタンを垂直の場所から移動すると、混乱する可能性があるため、そのままにしておきます。

4

3 に答える 3

1

これは、ジョーのフィドルのわずかに異なるバージョンです。不透明度を変更するだけでブロッキングが維持されます。

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

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

問題は主にマークアップにあります。「ナビゲーションボタンを非表示にする」は#leftNavigatorに含まれているため、＃leftNavigatorを非表示にすると、表示したままにするボタンも非表示になります。これを機能させるためにマークアップを変更する方法はいくつかあります。

基本的には、ナビゲーターのラッパーを作成して比較的配置し、その中に「ナビゲーションボタンを非表示にする」を絶対に配置しました。また、2つのコントロールパネルボタンに上部マージンを追加して、「ナビゲーションを非表示にする」ボタン用のスペースを残しました。これを機能させる方法はたくさんあります。

#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 に答える