jquery - mouseout 后如何保持子菜单 div 悬停(可见)？

Question

我在完成这件事时遇到了问题。我有一个子菜单容器 ( .subOptions ) 变成 visible (display:block)当鼠标悬停在 < li > 上时标签。

问题:现在当鼠标离开 Button 或 div( .subOptions ) 时，div 会隐藏。

我需要以某种方式在页面加载时使第一个 Button1 及其子菜单 div 可见，并且在鼠标离开 div 时保持可见状态(并且仅在将鼠标悬停在其他按钮上时更改)。

    <ul class="clearfix submenu">
        <li>
            <a>Button1</a>
            <div class="subOptions">
                Button 1 Content
            </div>
       </li>
       <li>
            <a>Button2</a>
            <div class="subOptions">
                Button 2 Content
            </div>
       </li>
       <li>
            <a>Button3</a>
            <div class="subOptions">
               Button 3 Content
            </div>
      </li>                                 
      <li>
            <a>Button4</a>
            <div class="subOptions">    
               Button 4 Content
            </div>
     </li>
 <ul>

任何可行的解决方案都将受到高度赞赏。我希望我解释得足够清楚。

示例如下: jsFiddle

Answer 1

您需要检查悬停状态，并且只有在选择不同的按钮时才更改它。

(function($) {

var activeSubmenuIndex;
$('.submenu li').on('mouseenter',
    function () {
        //return if it's the same button being hovered
        if ($(this).index() === activeSubmenuIndex) {
            return;
        }
        //remove classes from other buttons, put on new active one
        $('.submenu li').removeClass('submenuHover');
        $('.submenu li a').removeClass('aHover');
        //add class for li element
        $(this).addClass('submenuHover'); 
        $(this).find('a').addClass('aHover')
    });
 })(jQuery);

我还将您的两个悬停 CSS 类更改为由 JS 添加的常规类。这是一个工作 fiddle 。 http://jsfiddle.net/arbt0896/2/