jQuery的菜单问题

我有菜单，选项卡：jQuery的菜单问题

<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>元素，标签出现，如果你mouseout - 它消失，当你mouseout的<li>，并下降到选项卡，它不应该消失，目前我试图使它的工作，但当我mouseover <li>并下去悬停标签，它消失

来源

2010-11-10 Ahmed

我不知道这是否是最好的方式来做到这一点，但我所做的是在结束之前给予延迟。然后，当它关闭时，我会测试鼠标是否在开启器或标签栏菜单上。

下面是我使用的面板菜单的一个例子，它非常简单。

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

来源

2010-11-10 20:47:01 Tom

我重新调整了HTML把<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/

来源

2010-11-11 03:36:26 mVChr

jQuery的菜单问题

回答

相关问题