2

これは私が達成したいことの単純化されたバージョンです

3つのdivボックスを表示するページがあります

<div class="divd" id='div1' style="left:50px">>111</div>
<div class="divd" id='div2' style="left:150px">222</div>  
<div class="divd" id='div3' style="left:250px">333</div>
<p></p>
<p></p>
<p><input type="button"  id="tg" value="toggle"></p>

Jqueryを使用して中央のdivを切り替えています

  $('#tg').click(function() { 
    $('#div2').toggle('slow', function() {
    });
  });

これはすべて期待どおりに機能しますが、私がやりたいのは、divを非表示にして残された「ギャップを埋める」ことです。したがって、最終結果はdiv1とdiv3が隣り合っています。

.divd { 
position:absolute ; 
width: 50px;
height: 50px;   
top: 50px ;
left: 120px ; 
border: 1px solid black;
background-color:#999; 
border-radius:5px;  
z-index:200;
text-align:center;
}
4

2 に答える 2

1

私はあなたの要素が次のように絶対的に配置されていると思います：http：//jsfiddle.net/agpHB/1/

あなたはそれをする必要はありません。これを試して：

http://jsfiddle.net/agpHB/2/

.divd {
    float: left;
    width: 150px;
    background-color: #eee;
}

<div class="divd" id="div1">111</div>
<div class="divd" id="div2">222</div>
<div class="divd" id="div3">333</div>

フロートは厳密には必要ありません。絶対に配置する必要がある場合は、トグルを実行すると同時に、要素3を要素2の位置にスライドさせる必要があります。それほど単純ではありません。

更新：追加の要素に関するコメントに返信するには、次のようにしてください：http: //jsfiddle.net/agpHB/3/

于 2013-03-11T14:22:35.513 に答える
0 
<script>
flag=0;
displayhide(x){
a=document.getElementById(x).style;
if(flag=0)
    {
    a.display="block";
    flag=1;
    }
else
    {
    a.display="none";
    flag=0; 
    }
}
</script>

and use
<p><input type="button"  id="tg" onclick="displayhide('div2')" value="toggle"></p>
于 2013-03-11T14:33:38.103 に答える