在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问题绑定功能

回答

相关问题