我在悬停id时将一个简单的动画应用于div。 div不是id的孩子。因此,当我的光标离开id时,div隐藏自己。 这是正确的,但我要求div保持可见,除非我的鼠标离开它。
您可能需要进行测试以查看我的问题。链接在下面。
继承我的jQuery:
$(function(){
$('.has-children').hover(function(){
var the_handle = $(this).attr('id');
var the_sub_nav = '#' + the_handle + '-sub-nav';
$(the_sub_nav).stop().animate({height:'200px'},1000);
},function(){
var the_handle = $(this).attr('id');
var the_sub_nav = '#' + the_handle + '-sub-nav';
$(the_sub_nav).stop().animate({height:'0px'},1000);
});
});
以下是该问题的链接:
(我应该提到我对HTML代码的反应。我正在使用电子商务平台,这是我创建子类别的唯一方法)
答案 0 :(得分:2)
如果我理解正确的话;只需删除hover()
的第二个函数,即可在鼠标输出时保持div可见。完整代码:
$(function(){
$('.has-children').hover(function(){
var the_handle = $(this).attr('id');
var the_sub_nav = '#' + the_handle + '-sub-nav';
$(the_sub_nav).stop().animate({height:'200px'},1000);
});
});
答案 1 :(得分:1)
这里有一个简单的JSFiddle给你http://jsfiddle.net/toroncino/uPDXX/1/
编辑:这是一个简短的版本:http://jsfiddle.net/toroncino/uPDXX/3/
编辑2:
现在看看,是基于你当前的HTML ...显然我永远不会使用这样的js。 =)但也许它会帮助你...
答案 2 :(得分:0)
将子菜单容器添加到悬停功能,这样它将在鼠标悬停在菜单项或整个子菜单上时保持打开状态。
$('.has-children, #submenu-ID').hover(function(){
答案 3 :(得分:0)
$('.has-children').on('hover', function(){
var the_sub_nav = '#' + this.id + '-sub-nav';
$(the_sub_nav).stop().animate({height:'200px'},1000);
});