Question

我使用JQuery创建了一个简单的下拉菜单，在从子菜单/父选项卡中鼠标输出之前，如何保持父选项卡处于活动状态？

      $('#main-nav a').bind('mouseover', function()
      {
            $(this).parents('li').children('ul').show();

            if($(this).parents('li').children('ul').size() > 0)
            {
                  $(this).parents('li:first').addClass('hover');
            }
      });

      $('#main-nav a').bind('mouseout', function()
      {
            $(this).parents('li').children('ul').hide();

      });

HTML：

    <div id="main-nav" class="border clearfix">
            <ul>
                  <li class="current"><a href=""><span>Home</span></a></li>
                  <li><a href=""><span>Portfolio</span></a></li>
                  <li>
                        <a href=""><span>About Us</span></a>
                        <ul class="clearfix sub-menu">
                              <li><a href="">Sub Navigation Tab</a></li>
                              <li><a href="">Sub Navigation Tab</a></li>
                              <li><a href="">Sub Navigation Tab</a></li>
                              <li>
                                    <a href="">About Us</a>
                                    <ul class="clearfix"> 
                                          <li><a href="">Tabby</a></li>
                                    </ul>
                              </li>
                        </ul>
                  </li>
                  <li><a href=""><span>Contact</span></a></li>
                  <li><a href=""><span>Blog</span></a></li>
            </ul>
      </div>

Answer 1

你应该将悬停绑定在li而不是li中的a。

因为孩子们也在这里，所以他们仍然会活跃。

查看我的简单示例@ jsfiddle：http://jsfiddle.net/tUYfw/

Jquery下拉菜单 - 保持父标签处于活动状态？

1 个答案: