在jQuery菜單中的jQuery問題綁定功能

我正在嘗試一個簡單的jQuery菜單，顯示懸停的子菜單，如果我使用「顯示」和「隱藏」功能，一切工作得很好，但如果我綁定一個像slideDown或向上，它將重複該功能，直到光標離開綁定的LI對象。在jQuery菜單中的jQuery問題綁定功能

$('.myMenu > li').on('mouseover', openSM); 
$('.myMenu > li').on('mouseout', closeSM); 

function openSM() { 
    $(this).find('ul').show(); 
}; 

function closeSM() { 
    $(this).find('ul').hide(); 
};

當我設置show()和hide()到slideDown()和slideUp()，它基本上重複對所有的子菜單。

<li><a href="#">menu item</a> 
    <ul> 
     <li><a href="#">sub menu item 1</a></li> 
     <li><a href="#">sub menu item 2</a></li> 
     <li><a href="#">sub menu item 3</a></li> 
     <li><a href="#">sub menu item 4</a></li> 
    </ul> 
</li>

在每個子菜單項上它都會重複該功能......這意味着它會重複上下滑動。那麼，我想要做的就是將它設置爲只使用該功能時，它離開LI對象，而不是當它懸停子菜單時...

我用替換綁定，但它仍然不工作與slideDown和Up功能...任何幫助？

來源

2014-11-08 NuM3

'綁定'已被棄用一段時間了，你應該使用'on' – 2014-11-08 16:51:48

哦，謝謝。你是對的。我的錯。 – NuM3 2014-11-08 16:53:40

使用mouseenter和mouseleave而不是mouseover和mouseout。見

Jquery mouseenter() vs mouseover()

用於當有子元素的不同的解釋。

$('.myMenu > li').bind('mouseenter', openSM); 
 

 
$('.myMenu > li').bind('mouseleave', closeSM); 
 

 
function openSM() { 
 
    $(this).find('ul').slideDown(); 
 
}; 
 

 
function closeSM() { 
 
    $(this).find('ul').slideUp(); 
 
};

.myMenu > li ul { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="myMenu"> 
 

 
    <li> 
 
    <a href="#">menu item 
 
     </a> 
 
    <ul> 
 
     <li><a href="#">sub menu item 1</a > </li> 
 
     <li><a href="#">sub menu item 2</a > </li> 
 
     <li><a href="#">sub menu item 3</a > </li> 
 
     <li><a href="#">sub menu item 4</a > </li> 
 
    </ul > 
 
    </li> 
 
     </ul >

來源

2014-11-08 17:04:20 Barmar

感謝您解釋清楚！ – NuM3 2014-11-08 17:07:42

我只是想在@Barmar的回答有點修復一個惱人的錯誤擴大。傳遞一個回調函數slideUp和slideDown從上下跳躍移動你的鼠標指針來回在主列表項一堆次後停止列表：

$('.myMenu > li').bind('mouseenter', openSM); 
 

 
$('.myMenu > li').bind('mouseleave', closeSM); 
 

 
function openSM() { 
 
    $(this).find('ul').slideDown(function(){ 
 
    $(this).stop(true); 
 
    }); 
 
}; 
 

 
function closeSM() { 
 
    $(this).find('ul').slideUp(function(){ 
 
    $(this).stop(true); 
 
    }); 
 
};

.myMenu > li ul { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="myMenu"> 
 

 
    <li> 
 
    <a href="#">menu item 
 
     </a> 
 
    <ul> 
 
     <li><a href="#">sub menu item 1</a > </li> 
 
     <li><a href="#">sub menu item 2</a > </li> 
 
     <li><a href="#">sub menu item 3</a > </li> 
 
     <li><a href="#">sub menu item 4</a > </li> 
 
    </ul > 
 
    </li> 
 
     </ul >

來源

2014-11-08 17:17:04

在jQuery菜單中的jQuery問題綁定功能

回答

相關問題