0

を使用する大きな緑色のボックスがあり<div>、さらに赤と青という 2 つの小さな div があります。

誰かが緑のボックスをクリックすると、赤いボックスが上にスライドし、同時に青いボックスが下にスライドします。

そして、誰かが緑色のボックスをクリックすると、赤いボックスが下にスライドし、緑のボックスが上にスライドするはずです.

この基本的なスクリプトを書きましたが、緑色のボックスをクリックすると、赤色のボックスと緑色のボックスの両方が同時にスライドします。

一方が上昇し、他方が同時に下降するようにするにはどうすればよいでしょうか。

CSS:

.block {
   position: absolute;
   left: 23px;
   top: 34px;
   width: 500px;
   height: 360px;
   z-index: 1;
   background-color: #0F0;
}
.top-box {
   background-color: #F00;
   height: 179px;   width: 499px;
   z-index: 50;
}

.top-down {
   background-color: #00F;
   height: 179px;
   width: 499px;
   z-index: 50;
}

.bottom-box {
   background-color: #06F;
   height: 179px;
   width: 499px;
}

#red {
   position: absolute;
   left: 266px;
   top: 399px;
   width: 494px;
   height: 138px;
   z-index: 2;
}

#blue {
   position: absolute;
   left: 26px;
   top: 35px;
   width: 494px;
   height: 138px;
   z-index: 2;
}

JavaScript:

$(".block").click(
    function(){
       $(".top-box").slideUp('fast');
    },
    function(){
       $(".top-down").slideDown('slow');
    });
});

HTML:

<div class="block">    
   testing on green
   <div class="top-box" id="red">
      <div class="top-down" id="blue">
      </div>
   </div>
4

2 に答える 2

0

親要素を（上にスライドして）非表示にしてから、子要素が表示されることを期待することはできません。#blueこれの子なので#redうまくいきません。また、#blueすでに表示されているため、slideDown()とにかく何もしません。

また、なぜ.click()に 2 つの関数を渡すのですか? .click()ハンドラー関数を 1 つだけ取ります。2 つの引数を渡すと、最初の引数がイベント データとして扱われます。

于 2012-11-13T03:13:00.413 に答える
0

前述したように、SlideUp と SlideDown は、一致した要素をスライド モーションで非表示にします。物事を「スライド」させません。

animate関数を使用して効果を作成するようにコードを変更しました。jsfiddle を見て、これがあなたが求めているものかどうかを確認してください。

http://jsfiddle.net/neo108/SRYXN/

于 2012-11-13T03:15:29.837 に答える