读书人

请问个jq鼠标经过的二级导航菜单

发布时间: 2013-10-01 12:15:56 作者: rapoo

请教个jq鼠标经过的二级导航菜单

<script>
function initMenu() {
$('#menu ul').hide();
$('#menu li a').mouseover(
function() {
var checkElement = $(this).next();
if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
return false;
}
if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('#menu ul:visible').slideUp('normal');
checkElement.slideDown('normal');
return false;
}
}
);
}
$(document).ready(function() {initMenu();});
</script>
<ul id="menu">
<li>
<a href="#">Weblog Tools</a>
<ul>
<li><a href="http://www.pivotx.net/">PivotX</a></li>
<li><a href="http://www.wordpress.org/">WordPress</a></li>
</ul>
</li>
<li>
<a href="#">Programming Languages</a>
<ul>
<li><a href="http://www.php.net/">PHP</a></li>
<li><a href="http://www.ruby-lang.org/en/">Ruby</a></li>
<li><a href="http://sc.xueit.com/">Python</a></li>
<li><a href="http://www.perl.org/">PERL</a></li>
<li><a href="http://java.sun.com/">Java</a></li>
<li><a href="http://en.wikipedia.org/wiki/C_Sharp">C#</a></li>
</ul>
</li>
</ul>


这个原先是鼠标点击的效果,我给改成鼠标经过的效果了
我想变成鼠标离开后,子菜单也隐藏

我加了个
 $('.meaq1 li a').mouseout(function(){
$('.meaq1 ul:visible').slideUp('normal');
});

这个。效果不太正常。。。。

多谢了
[解决办法]
如果“.meaq1”是加在最外层ul上的话:试了下 挺正常的~
[解决办法]
你要的是不是这效果

<script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>

<script>
function initMenu() {
$('#menu ul').hide();
$('#menu li a').mouseover(
function() {
var checkElement = $(this).next();
if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
return false;
}
if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('#menu ul:visible').slideUp('normal');
checkElement.slideDown('normal');
return false;
}
}
);

$('#menu ').mouseleave( function(){
$('#menu ul:visible').slideUp('normal');
});
}





$(document).ready(function() {initMenu();});
</script>
<div>
<ul id="menu">
<li>
<a href="#">Weblog Tools</a>
<ul>
<li><a href="http://www.pivotx.net/">PivotX</a></li>
<li><a href="http://www.wordpress.org/">WordPress</a></li>
</ul>
</li>
<li>
<a href="#">Programming Languages</a>
<ul>
<li><a href="http://www.php.net/">PHP</a></li>
<li><a href="http://www.ruby-lang.org/en/">Ruby</a></li>
<li><a href="http://sc.xueit.com/">Python</a></li>
<li><a href="http://www.perl.org/">PERL</a></li>
<li><a href="http://java.sun.com/">Java</a></li>
<li><a href="http://en.wikipedia.org/wiki/C_Sharp">C#</a></li>
</ul>
</li>
</ul>
</div>

读书人网 >JavaScript

热点推荐