Question

我有这个html菜单：

      <ul id='main'>
        <li class='active current' id='lighty'>
          <a href='/'>Lighty</a>
          <ul>
            <li class='sub'>
              <a href='/'>Hem</a>

            </li>
          </ul>
        </li>
        <li id='community'>
          <a href='/community'>Community</a>
        </li>
      </ul>

这个jquery：

        $("#menu ul > li").mouseenter(function(){
         id = $(this).attr("id");
         $("#menu #main li").removeClass("active");
         $(this).addClass("active");
        }).mouseleave(function(){
         id = $(this).attr("id");
         menu.timers[id] = setTimeout(function(){$("#menu #main li#"+id).removeClass("active");}, 2000);
        });

我想要实现的是，当我在主要ul中悬停其中一个li时，应该显示该li的孩子ul。当我将鼠标移出li或孩子ul时，菜单应该可见2秒钟。它通过主要的按钮工作，但如果在孩子的ul上移出它只是消失，它不会等待两秒钟。

等待两秒钟，如果你意外地将鼠标移出它，你可以进入菜单。

有人可以帮我解决这个错误吗？也许你有更好的解决方案？

这里还有一个屏幕截图，说明菜单如果有帮助： screen shot under or click here Screenshot http://img42.imageshack.us/img42/813/screenshotar.png

Answer 1

这是你的意思吗？

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
<!--
$(function() {
    $("ul#main > li").mouseenter( function(){
        $("#main li").removeClass("active");
        $(this).addClass("active");
    }).mouseleave(function(){
        setTimeout( function()
        {
            $("#main li").removeClass("active");
         }, 2000);
    });
});
//-->
</script>
<style type="text/css">
    #main li ul {
        display: none;
    }
    #main li.active ul {
        display: inline;
    }
</style>

<ul id="main">
    <li id="lighty">
        <a href="/">Lighty</a>
        <ul>
            <li class="sub">
                <a href="/">Hem</a>
            </li>
        </ul>
    </li>
    <li id="community">
        <a href="/community">Community</a>
        <ul>
            <li class="sub">
                <a href="/">more</a>
                <a href="/">more1</a>
                <a href="/">more2</a>
                <a href="/">more4</a>
            </li>
        </ul>
    </li>
</ul>

显示父ul菜单的右子ul

1 个答案: