Question

问题：

我有两张幻灯片，一种菜单。

<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，并且确实对语法感到困惑。谢谢！

Answer 1

悬停采取两个处理程序：当鼠标指针进入并离开元素时。如果您使用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

Answer 2

另一个想法。 “高度”上有拼写问题，您可以尝试div中包含的块。

我改变了一些事情，它在这里工作http://jsfiddle.net/G3BuZ/1/

$(document).ready(function() {
        $("#one").hover(function() {
        $("#block1").slideDown("slow");
    });
        $('#one').mouseleave(function() {
        $("#block1").slideUp("slow");
    });
        $("#two").hover(function() {
        $("#block2").slideDown("slow");
    });
        $('#two').mouseleave(function() {
        $("#block2").slideUp("slow");
    });  

});

Answer 3

工作小提琴：

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

此作品 - 悬停有两个部分（悬停on和悬停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");
    });
});

Answer 4

实际上，您的代码正常运行。如果您移到右侧框中，则会在其中显示Blabla2。问题是隐藏了Blabla的左侧div，因此Blabla2浮动到最左侧，而不是#two。您需要更改CSS。

简单的jQuery slideDown不适用于两个

4 个答案: