我的问题类似,但与 jquery-hover-menu-when-hovering-over-child-menu-disappears 不同.
我最初在 li.item 上有悬停事件,这有点奇怪,但做了我需要它做的事情。我将悬停切换到跨度,以便事件将在文本 block 上触发,而不是在列表 block 上触发,这会扩展列表的整个宽度。
我想要实现的效果是将鼠标悬停在 ul.sub
上时。我希望它继续播放 span.text
悬停队列中的动画,该动画正在显示它,但也保持其打开状态。
发生的情况是鼠标离开了范围,因此 li.item
正在触发触发器的 mouseout 部分。
jsFiddle Page
HTML
<小时/>
<ul id="main">
<li class="head">Title Bar</li>
<li class="item odd">
<span class="text">A</span>
<ul class="sub">
<li>1</li>
<li>2</li>
</ul>
</li>
<li class="item even">
<span class="text">B</span>
<ul class="sub">
<li>3</li>
<li>4</li>
</ul>
</li>
<li class="item odd">
<span class="text">C</span>
<ul class="sub">
<li>5</li>
<li>6</li>
</ul>
</li>
<li class="item even">
<span class="text">D</span>
<ul class="sub">
<li>7</li>
<li>8</li>
</ul>
</li>
</ul>
CSS
<小时/>
/* colors used are not for production; they are
used only to enhance the example's visual distinction */
#main{width:10em;}
.head,.item{border:1px solid black;padding:.5em;}
.head{font-weight:bold; background:#336; color:#fff; cursor:pointer;}
.item{background:#f90;}
.sub{display:none;}
.sub li{padding-left:1em;}
.text,.sub{cursor:pointer;}
JavaScript
<小时/>
$(document).ready(function(){
// specific here because of other divs/list items
$('#main li.item span.text').hover(function(){
$(this).siblings().stop(true,true).toggle('slow');
});
$('li.head').hover(function(){
$(this).parent().find('ul.sub').stop(true,true).toggle('slow');
});
});
编辑:
我认为沿着这些思路的东西就是我所需要的,但是当从子到跨度时动画会重新触发。
$(document).ready(function(){
// specific here because of other divs/list items
$('#main li.item span.text').hover(
function(){$(this).siblings().stop(false,true).show('slow');}
,function(){$(this).siblings().stop(true,true).hide('slow');}
);
$('#main li.item ul.sub').hover(
function(){$(this).stop(false,true).show();}
,function(){$(this).stop(false,true).hide('slow');}
);
$('li.head').hover(function(){
$(this).parent().find('ul.sub').stop(true,true).toggle('slow');
});
});
最佳答案
拆分hover行为分为其两个组成部分,mouseenter和 mouseleave 。又 split toggle()进入show()和 hide() 。将 mouseenter
绑定(bind)到 span.text
并将 mouseleave
绑定(bind)到 li.item
:
$(document).ready(function() {
// specific here because of other divs/list items
$('#main li.item span.text').mouseenter(function() {
$(this).siblings().stop(true, true).show('slow');
});
$('#main li.item').mouseleave(function() {
$(this).children("ul").stop(true, true).hide('slow');
});
$('li.head').hover(function() {
$(this).parent().find('ul.sub').stop(true, true).toggle('slow');
});
});
这样,悬停就不会由空格触发,而这正是您想要的。
关于jquery-ui - jQuery:将鼠标悬停在其上时保持切换的子元素打开,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4054756/