jquery 菜单问题答案

【问题标题】：jquery menu problemjquery 菜单问题
【发布时间】：2010-11-10 20:40:22
【问题描述】：

我有带标签的菜单：

<div class="section">
<ul class="topnav">
    <li><a href="#">First</a></li>
    <li><a href="#">Second</a></li>
    <li><a href="#">Third</a></li>
</ul><!--//topnav-->


<div class="tabbox">
 Tab here
</div>
<div class="tabbox">
 Tab here
</div>
<div class="tabbox">
 Tab here
</div>

</div><!--//section-->

这里是 jQuery 代码：

  (function($) {  
    $(function() { 
  $('ul.topnav').delegate('li:not(.curtab)', 'click', function(event) {  
      $(this).addClass('curtab').siblings().removeClass('curtab')
     .parents('div.section').find('div.tabbox').hide().eq($(this).index()).show(); });})

   })(jQuery)

我需要为悬停事件重写此菜单，并且当您将鼠标悬停在 <li> 元素上时，选项卡会出现，如果您将鼠标移出 - 它会消失，并且当您将鼠标移出 <li> 并进入选项卡时也会消失，它不应该消失，目前我试图让它工作，但是当我将鼠标悬停在<li> 并向下悬停标签时，它消失了

【问题讨论】：

标签： jquery tabs hover

【解决方案1】：

我不知道这是否是最好的方法，但我所做的是在关闭前延迟。然后当它关闭时，我测试鼠标是否在开启器或选项卡菜单上。

下面是我正在使用的一个非常简单的面板菜单示例。

var timer = null;
var timer2 = null;
var buttonHot = false;
var navHot = false;
var menuOpen = false;
var inMotion = false;
var activeMenu = null;
$(document).ready(
    function() {
        $('#adminButton').mouseover(function() {
            buttonHot = true;
            activeMenu = 'adminMenu';
            startOpenTimer();
        }); 
        $('#adminButton').mouseout(function() {
            buttonHot = false;
            startCloseTimer();
        });
        $('#personnelButton').mouseover(function() {
            buttonHot = true;
            activeMenu = 'personnelMenu';
            startOpenTimer();
        }); 
        $('#personnelButton').mouseout(function() {
            buttonHot = false;
            startCloseTimer();
        });

        $('#panelMenu').mouseover(function() {
            navHot = true;
            openMenu();
        }); 
        $('#panelMenu').mouseout(function() {
            navHot = false;
            startCloseTimer();
        });

    }
);

function startCloseTimer() {
    timer = setTimeout(closeMenu, 150);
}

function startOpenTimer() {
    timer2 = setTimeout(openMenu, 90);
}

function openMenu() {
    if(buttonHot) {
        $('#adminMenu').hide();
        $('#schoolMenu').hide();
        $('#personnelMenu').hide();
        $('#' + activeMenu).show();

        $('#panelMenu').show();
        if (!menuOpen && !inMotion) {
            inMotion = true;
            $('#panelMenuSlide').slideDown(400, setOpen);
        } else {
            if (inMotion) {
                $('#panelMenuSlide').stop(true, true);
                inMotion = false;
                openMenu()
            }
        }
    }
}

function setOpen() {
    inMotion = false;
    menuOpen = true;
}

function closeMenu() {
    clearTimeout(timer);
    if (menuOpen && !navHot && !buttonHot) {
        inMotion = true;
        $('#panelMenuSlide').slideUp(400, hideMenu); 
    }
    if (inMotion) {
        startCloseTimer();
    }
}

function hideMenu() {
    menuOpen = false;
    inMotion = false;
    if (!navHot && !buttonHot) {
        $('#panelMenu').hide();
    } else {
        openMenu();
    }
}

function setOpen() {
    menuOpen = true;
}

【讨论】：

【解决方案2】：

我重组了 HTML 以将标签放在 <li> 标记内，以便将鼠标悬停在标签上保持 li 触发器：

<div class="section">
    <ul class="topnav">
        <li>
            <a href="#">First</a>
            <div class="tabbox">
                Tab 1
            </div>
        </li>
        <li>
            <a href="#">Second</a>
            <div class="tabbox">
                Tab 2
            </div>
        </li>
        <li>
            <a href="#">Third</a>
            <div class="tabbox">
                Tab 3
            </div>
        </li>
    </ul><!--//topnav-->
</div><!--//section-->

并更改 jQuery 以使用 mouseenter 和 mouseleave 来确定选项卡是否应该显示或隐藏：

(function($) {
    $(function() {
        $('ul.topnav').delegate('li:not(.curtab)', 'mouseenter', function(e) {
            $(this).addClass('curtab')
                .siblings().removeClass('curtab')
                .parents('div.section').find('div.tabbox').hide()
                .eq($(this).index()).show();
        });
        $('ul.topnav').delegate('li', 'mouseleave', function(e) {
            $(this).removeClass('curtab')
                .parents('div.section').find('div.tabbox').hide();
        });
    });
})(jQuery);

经过测试和功能。 http://jsfiddle.net/nAmAh/

【讨论】：