Jquery Dropdown Menu - 保持父选项卡处于活动状态？答案

【问题标题】：Jquery Dropdown Menu - Keep parent tab active?Jquery Dropdown Menu - 保持父选项卡处于活动状态？
【发布时间】：2011-01-03 21:17:28
【问题描述】：

我使用 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>

【问题讨论】：

你的 html 是什么样的？
在 jsFiddle 上添加了一个简单的示例。如果有什么不清楚的地方请告诉我。

标签： jquery drop-down-menu tabs

【解决方案1】：

您应该将鼠标悬停在 li 上而不是 li 中的 a。

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

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

【讨论】：

子子菜单在 IE7 中不显示，但是任何人，关于活动选项卡的任何想法？
在 IE7、IE8 和 Chrome 中测试。它应该工作。将鼠标悬停在关于我们上。