JQuery меню проблема

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

Я реструктурировал 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/

Answer 2

Я не знаю, является ли это лучшим способом сделать это, но я делаю задержку перед закрытием.Затем, когда он закрывается, я проверяю, находится ли мышь над открывателем или меню вкладок.

Ниже приведен пример очень удобного меню панели, которое я использую.

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