0

問題：

2 つのスライド ダウン、一種のメニューがあります。

<div id="one" style="background-color: red; width: 200px; heihgt: 125x; margin-left: 5px; float: left;">One</div>
<div id="two" style="background-color: red; width: 200px; heihgt: 125x; margin-left: 5px; float: left;">Two</div><br />
<div id="block1" style="background-color: blue; width: 200px; height: 300px; margin-left: 5px; float: left; display: none;">Blabla</div>
<div id="block2" style="background-color: blue; width: 200px; height: 300px; margin-left: 5px; float: left; display: none;">Blabla2</div>

そして、この jQuery スクリプト:

<script>
$(document).ready(function() {
    $("#one").hover(function() {
        $("#block1").slideToggle("slow");
    });
    $("#two").hover(function() {
        $("#block2").slideToggle("slow");
    });
});
</script>

主なアイデアは、#one にカーソルを合わせると #block1 を下にスライドし、#two にカーソルを合わせると #block2 を下にスライドすることです。

しかし、問題があります：

#one をホバリングすると、正常に動作します。

しかし、#two をホバーしても何も起こりません。

#one をホバーしてから #two をホバーすると機能しますが、最後にもう一度 #block1 をスライドさせます。何が原因なのかわからない？

質問

私は何を間違えましたか？#one をホバーすると #block1 が切り替わり、#two をホバーすると #block2 がトグルされるようにするにはどうすればよいですか。

jQueryの学習を始めたばかりで、構文が本当に混乱しています。ありがとう！

4

4 に答える 4

2

ホバーは、マウス ポインターが要素に出入りするときの 2 つのハンドラーを受け取ります。メソッドmouseoverに別のハンドラーを使用または追加すると機能するはずですhover

HTML と CSS に問題が発生したため、この HTML を例として取り上げます。

<div id="one" class="div" style="background-color: red; width: 200px; heihgt: 125x; margin-left: 5px; float: left;">One</div>
<div id="two" class="div" style="background-color: red; width: 200px; heihgt: 125x; margin-left: 5px; float: right;">Two</div><br />
<div id="block1" style="background-color: blue; width: 200px; height: 300px; margin-left: 5px; float: left; display: none;">Blabla</div>
<div id="block2" style="background-color: blue; width: 200px; height: 300px; margin-left: 5px; float: right; display: none;">Blabla2</div>

jQuery:

$(".div").each(function(i) {
    var index = i + 1;
    $(this).hover(
      function () {
        $(this).siblings("#block" + index).slideDown("slow");
      },
      function () {
        $(this).siblings("#block" + index).slideUp("slow");
      }
    );
});

Working Demo

于 2013-04-07T13:08:44.080 に答える
0

ワーキングフィドル：

http://jsfiddle.net/HKNDY/3/

これは機能します - hover には 2 つの部分 ( hoveronと hover off) があります。マウスが から離れたときに、ブロックをスライドさせて元に戻す必要がありますdiv。

$(document).ready(function() {
    $("#one").hover(function() {
        $("#block1").slideToggle("slow");
    }, function(){
        $("#block1").slideToggle("slow");
    });
    $("#two").hover(function() {
        $("#block2").slideToggle("slow");
    }, function(){
         $("#block2").slideToggle("slow");
    });
});
于 2013-04-07T13:09:42.303 に答える