首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

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

2013-10-01 
请教个jq鼠标经过的二级导航菜单scriptfunction initMenu() {$(#menu ul).hide()$(#menu li a).mou

请教个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>

热点排行