0
我有一個jQuery函數slideUp和slideDown的小問題。jQuery slideDown和slideUp子菜單
jsBin Demo
我有它的下面垂直子垂直菜單。
當用戶進入一個具有子菜單的菜單項時，它必須顯示它，這是正在工作的部分。
當用戶離開菜單項並進入子菜單項時，它仍然需要可見。 這個問題，我試圖趕上setTimeout函數，將刪除（上拉）1500ms後的子菜單。如果用戶在此時將鼠標移動到子菜單，則setTimeout將被清除（clearTimeout）
但是，當用戶將鼠標移動到主菜單項上時，將顯示所有子菜單，並顯示來自原始頁面的內容將被推倒。
圖片：http://i43.tinypic.com/5ww8yq.png
這是當我提出我的鼠標速度非常快在所有主要的菜單項。
應該如何： 當用戶將鼠標移動到主菜單項時，必須顯示子菜單。當他移動到另一個主菜單項時，當前子菜單必須是不可見的，並且必須顯示另一個子菜單。
#menu
{
background-color: white;
width: 1000px;
margin-top: 10px;
height: 30px;
position: relative;
}
#menu ul li
{
float: left;
display: inline;
width: 125px;
height: 30px;
line-height: 30px;
text-align: center;
}
#menu ul li.right { float: right; }
#menu ul li a
{
top: 5px !important;
text-decoration: none;
font-size: 20px;
height: 30px;
color: #01224D;
}
.submenu
{
background-color: #01224D;
width: 1000px;
height: 30px;
color: white;
display: none;
}
.submenu ul li
{
display: inline;
width: 100px;
height: 30px;
line-height: 30px;
float: left;
text-align: center;
}
.submenu ul li.right { float: right; }
.submenu ul li a
{
text-decoration: none;
font-size: 20px;
height: 30px;
color: white;
}
HTML：
<div id="menu">
<ul>
<li><a href="index.php">Home</a></li>
<li>
<a class="mainMenuA" id="menu-1" href="#">Lederwaren</a>
</li>
<li><a class="mainMenuA" id="menu-2" href="#">Tassen</a></li>
<li><a class="mainMenuA" id="menu-3" href="#">Koffers</a></li>
<li><a class="mainMenuA" id="menu-4" href="#">Kleding</a></li>
<li><a class="mainMenuA" id="menu-5" href="#">Accessoires</a></li>
<li class="right"><a href="vestigingen.php">Vestigingen</a></li>
</ul>
</div><!-- menu-->
<div class="submenu" id='submenu-1'>
<ul>
<li><a href="#">Submenu</a></li>
</ul>
</div><!-- submenu -->
<div class="submenu" id='submenu-2'>
<ul>
<li><a href="#">Submenu</a></li>
<li><a href="#">Submenu</a></li>
</ul>
</div><!-- submenu -->
<div class="submenu" id='submenu-3'>
<ul>
<li><a href="#">Submenu</a></li>
<li><a href="#">Submenu</a></li>
<li><a href="#">Submenu</a></li>
</ul>
</div><!-- submenu -->
<div class="submenu" id='submenu-4'>
<ul>
<li><a href="#">Submenu</a></li>
<li><a href="#">Submenu</a></li>
<li><a href="#">Submenu</a></li>
<li><a href="#">Submenu</a></li>
</ul>
</div><!-- submenu -->
<div class="submenu" id='submenu-5'>
<ul>
<li><a href="#">Submenu</a></li>
<li><a href="#">Submenu</a></li>
<li><a href="#">Submenu</a></li>
<li><a href="#">Submenu</a></li>
<li><a href="#">Submenu</a></li>
</ul>
</div><!-- submenu -->
JS：
$(document).ready(function(){
var timer;
var hover;
$('.mainMenuA').hover(
function()
{
var id = $(this).attr('id').split('-')[1];
$('#submenu-'+id).slideDown();
},
function()
{
var id = $(this).attr('id').split('-')[1];
timer = setTimeout(function() { $('#submenu-'+id).slideUp(); },1500);
}
);
$('.submenu').hover(
function()
{
clearTimeout(timer);
},
function()
{
var id = $(this).attr('id');
timer = setTimeout(function() { $('#'+id).slideUp(); },1500);
}
);
});
我希望有人能幫助我。
這有我有同樣的問題，當你快速移動菜單項 – WannaKnow 2012-03-07 07:11:01