簡單的jQuery slideDown不能用於兩個

我有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>

主要思想是滑下＃塊1，如果你懸停#one，並滑下＃塊2，如果你將鼠標懸停#two

但有問題：

當懸停#one，它工作正常。

但是當你懸停#two時，沒有任何反應。

如果你懸停#one，然後#two，它會起作用，但最後它會再次slideDown＃block1。我不知道是什麼導致它？

問題

我做了什麼錯？我如何做到這一點，當你懸停#one，它切換＃block1，當我懸停#two，它切換＃block2。

我剛開始學習jQuery，而且語法真的很混亂。謝謝！

來源

2013-04-07 Jony Kale

檢查我的編輯:) – Eli 2013-04-07 13:26:37

懸停需要兩個處理程序：鼠標指針進入和離開元素時。如果你使用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"); 
     } 
    ); 
});

來源

2013-04-07 13:08:44 Eli

什麼是I + 1？爲了什麼？ – 2013-04-07 13:45:39

因爲'each（）'的索引從0開始，但是你的id是'block1'，'block2'不是以'block0'開頭，所以我需要增加它1默認 – Eli 2013-04-07 13:46:46

工作小提琴：

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"); 
    }); 
});

來源

2013-04-07 13:09:42

其實，你的代碼正在工作。如果你移動到正確的方框，你將有Blabla2在那裏。問題是與Blabla左邊的div是隱藏的，所以Blabla2漂浮在最左邊，而不是#two。你需要改變你的CSS。

來源

2013-04-07 13:11:11 mrks

哦..我現在得到這個...非常感謝！ – 2013-04-07 13:12:55

另一個想法。在「高度」上存在拼寫問題，您可以嘗試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"); 
    }); 

});

來源

2013-04-07 13:36:38

簡單的jQuery slideDown不能用於兩個

回答

相關問題