Question

我试图制作一个与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上时显示使用fadeIn的孩子 - 当你离开父母而且离开孩子时，要隐藏孩子 - 当你进入另一个孩子时，隐藏以前的孩子。

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

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

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

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

Answer 1

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

Answer 2

这应该有效：

$('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();
    }
})

显示孩子onmouseover但在mouseoff上隐藏孩子

2 个答案: