2

我试图制作一个与 IE 兼容的菜单... :(

我使用具有以下结构的 css 做了一个菜单：

<div id="menu">
<ul id="menuu">
<li><a href="#" class="parent">Parent</a>
<ul class="children">
<li><a href="/#">name</a></li>
<li><a href="/#">name</a></li>
<li><a href="/#">name</a></li>
</ul>
</li>
</ul>
</div>

我想做的是：
- 当鼠标悬停在 a.parent 上时，使用淡入淡出显示孩子
- 当您离开父母并且离开孩子时，隐藏孩子。
- 当你进入另一个孩子时，隐藏以前的孩子。

我做了一个脚本，但我无法以正确的方式隐藏孩子们。

<script>
$('a.parent').hover(function() {
    if( $(this).next().hasClass('children') ){
        $(this).next().fadeIn();
    }else{
        //alert( 'false' );
    }
},
function() {
//here when you are out from a.parent

});
</script>

因为如果我在离开父母时隐藏孩子（子菜单），我无法打开孩子的任何链接，因为当我从父母移到孩子时，孩子被隐藏了......所以我不知道如何解决它。 .. :(

有人可以帮助我吗？？非常感谢！

4

2 回答 2

0

如何将对象与背景混合，而不是让它消失？

于 2012-11-30T15:10:10.283 回答
0

这应该有效：

$('a.parent').bind('mouseover',function(){  
   $(this).addClass('hover');
   if($(this).next('ul').hasClass('children')){
      $(this).next('.children').addClass('expanded');         
     $(this).next('.children').stop().fadeIn();
    } else {
     //
    }
}).bind('mouseout',function(){
     $(this).removeClass('hover');
     if($(this).next('.children').not('.expanded'))
      {
         //If need be, you can add a delay here to make sure the mouse made it to 'children'
         $('.children').stop().fadeOut();
      }
})

$('.expanded').bind('mouseout',function(){
   $(this).removeClass('expanded');
   if($(this).prev('a').not('.hover')){
      $(this).stop().fadeOut();
    }
})
于 2012-11-30T15:15:57.073 回答