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 の上にあるとき、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>

親から離れたときに子（サブメニュー）を非表示にすると、親から子に移動すると子が非表示になるため、子からのリンクを開くことができないため、解決方法がわかりません。 .. :(

誰かが私を助けることができますか?? どうもありがとうございました！

4

2 に答える 2

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 に答える
0

オブジェクトを非表示にするのではなく、背景とブレンドするのはどうですか?

于 2012-11-30T15:10:10.283 に答える