Question

我有带标签的菜单：

<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>并向下悬停标签时，它消失

Answer 1

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

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

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;
}

Answer 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/

jquery菜单问题

2 个答案: