[英]jquery accordion mouseover and mouseout on navigation of vertical menu
下面是我的代码,我想当我将鼠标悬停在Link CMT上时,其div将打开,而当我将鼠标移出其div时,则关闭。 .....
<div class="wrap">
<ul class="accordion1">
<li>
<h2 id="first">CMT</h2>
<div class="content">
contents of 1st
</div>
</li>
<li>
<h2>FOIS</h2>
<div class="content">
contents of 2nd
</div>
</li>
<li>
<h2>ASP</h2>
<div class="content">
contents of 3rd
</div>
</li>
<li>
<h2>PTT</h2>
<div class="content">
contents of 4th
</div>
</li>
</ul>
</div>
尝试这个
$('h2').on('mouseenter', function () {
$(this).next().show();
}).on('mouseleave', function () {
$(this).next().hide();
});
如果您希望将鼠标悬停在该内容上时也希望显示该内容,则可以执行此操作
$('li').on('mouseenter', function () {
$(this).find('.content').show();
}).on('mouseleave', function () {
$(this).find('.content').hide();
});
我有一个类似的解决方案,但使用hover()代替:
$(document).ready(function(){
$('h2').hover(function(){
$(this).next().css("display","block");
},function(){
$(this).next().css("display","none");
});
});
实际上,与此相比,我更喜欢.show()/ .hide()方法:
$(document).ready(function(){
$('h2').hover(function(){
$(this).next().show('fast');
},function(){
$(this).next().hide('fast');
});
});
不要过度执行此操作或任何操作,而是从另一个另一个stackoverflow问题中找到了一个非常有趣的解决方案:
不过,最后一次更新,我保证!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.