隐藏活跃的子菜单中盘旋而其他菜单项

我使用一个CSS类：隐藏活跃的子菜单中盘旋而其他菜单项

#navbar .current-menu-ancestor ul.sub-menu {display:inline;}

使其页面的子菜单粘性。

我需要隐藏它（通过jQuery），如果我悬停其他顶级菜单项。

例如：

Top产品1
- 菜单1A
- 菜单1B
Top产品2
Top产品3
- 菜单3A
- 菜单3B
- 菜单3C

如果我在页面菜单1b我现在有顶部项目1显示的所有子菜单。
我需要当我悬停在顶端项目3上显示其子菜单并隐藏“活动”子菜单。

（这些是水平的子菜单与透明背景...）

来源

2012-12-28 Marco

如果您将代码放在jsFiddle中以显示哪些内容无法正常工作，那真的很有帮助。 –

我有兴趣使用这个插件然后chk这个http://www.tripwiremagazine.com/2012/12/jquery-menu-plugins.html有很好的动画和CSS附加到这些菜单上... – Scorpio

有些方法可以通过CSS来做到这一点，可能会更可行。

红队Design.com已经发布完成你的目标的几个非常流行的方法：

这是一个很好的例子，他们提供了一个有用的教程以及。然而，如果你绝对必须使用jQuery（如果这是某种作业，例如）我会坚持点击事件以避免复杂的代码，然后我真的很懒惰:)

你可以轻松地做这样的事情：

演示：http://jsfiddle.net/jrb9249/5n5Bp/4/

HTML：

<html> 
    <body> 
     <div class="div_parent"> 
      <ul class="top_menu"> 
       <li><a href="#">Home</a></li> 
       <li id="shop_li"><a href="#" onClick="javascript:mouseEvent('#shop_div')">Shop</a> 
        <div class="sub_div" id="shop_div"> 
         <ul id="shopmenu" class="sub_menu"> 
          <li>Electronics</li> 
          <li>Software</li> 
          <li>Mail-Order Brides</li> 
          <li>Insert bazaar product here</li> 
         </ul> 
        </div> 
       </li> 
       <li id="contact_li"><a href="#" onClick="javascript:mouseEvent('#contact_div')">Contact Us</a> 
        <div class="sub_div" id="contact_div"> 
          <ul id="contactmenu" class="sub_menu"> 
           <li>Email</li> 
           <li>Phone</li> 
          </ul> 
        </div> 
       </li> 
      </ul> 
     </div> 
    </body> 
</html>

的Javascript：

var anim; 

$(document).click(function(event){ 
    if(event.target.nodeName != 'LI' && (anim==0)){ 
     $('.sub_div').fadeOut('fast'); 
    }; 
}); 

anim = 0; 
function mouseEvent(myid){ 
    $('.top_menu li > div').each(function(){ 
     $(this).fadeOut('fast'); 
    }); 
    anim = 1; 
    $(myid).fadeIn('fast', function(){ 
     anim = 0; 
    }); 
};

CSS：

.div_parent 
{ 
    background:transparent; 
    padding:5px; 
    margin:0px; 
    float:left; 
    border:solid 1px gray; 
} 

.sub_div 
{ 
    paddin:0px; 
    margin:0px; 
    position:absolute; 
    margin-top:3px; 
    display:none; 
} 


.top_menu, .sub_menu 
{ 
    margin:0px; 
    padding:0px; 
    background:transparent; 
} 

.top_menu li 
{ 
    float: left; 
    display:inline; 
    margin:0px 5px 0px 5px; 
} 

a:link,a:active,a:visited 
{ 
    color:blue; 
    text-decoration:none; 
} 

a:hover 
{ 
    text-decoration:underline; 
} 

.sub_menu li 
{ 
    clear:both; 
    float:left; 
    background:#E2EDD5; 
    border:solid 1px white; 
    padding:2px; 
    width:150px; 
} 

.sub_menu li:hover 
{ 
    cursor:pointer; 
    background:#FFFFE8; 
}

这使用jquery的淡出的动画（简单）而变量“动画”，以避免打开和关闭的形式之间的冲突。 CSS会为你整理一切。我试图尽可能在这个演示中使用jquery。我希望它有帮助。祝你好运。

来源

2012-12-28 17:01:50 Lopsided

绑定到.mouseleave()事件不便。类似于

$('.main_menu_container').mouseleave(function() { 
    $(this).children('.submenu').hide(); 
});

来源

2012-12-28 15:14:30

隐藏活跃的子菜单中盘旋而其他菜单项

回答

相关问题