2

メニューがあり、メニュー上の特定の要素をホバリングしているときに、#sub別のメニューが下にスライドしているとし.subnavます。

どうすればそれを達成できますか:

('.subnav') がダウンしていて、私が彼をホバリングしておらず、('#sub') もホバリングしていない場合、('.subnav') は上にスライドします。

私は not filter でそれをやろうとしました。

HTML :

<ul class="topnav">
        <li><a href="#">Home</a></li>
        <li id="sub"><a href="#">slide</a>   
            <ul class="subnav">
                <li><a href="#">sub</a></li>
                <li><a href="#">sub</a></li>
                <li><a href="#">sub</a></li>
            </ul>
       </li>
</ul>

JS :

 $('.topnav #sub').hover(function() {
    $(this).children('.subnav').slideDown('fast');

    $(':not(#sub,#subnav)').hover(function () {
        $('#sub .subnav').slideUp('fast');
    });      
});

どうもありがとう（そして最善の方法を説明してください）。

4

3 に答える 3

0

実際にCSSを使ってそれを行うことができます

<ul class="topnav">
    <li><a href="#">Home</a></li>
    <li id="sub"><a href="#">slide</a>   
        <ul class="subnav">
            <li><a href="#">sub</a></li>
            <li><a href="#">sub</a></li>
            <li><a href="#">sub</a></li>
        </ul>
   </li>
</ul>

今あなたのCSSのために

#sub:hover .subnav {display: block;}

それと同じくらい簡単です。

フィドル: http://jsfiddle.net/ks22d/

jQuery を使用したアニメーションが必要な場合は、次のコードを微調整します。

$(document)​.ready(function(){
    $("#sub").children('.subnav').hide();
    $("#sub").hover(function(){
        $(this).children('.subnav').slideDown('fast');
    }, function(){
        $(this).children('.subnav').slideUp('fast');
    });
});​

フィドル: http://jsfiddle.net/ks22d/1/

ps: Jan Dvorakの回答に触発されました...

于 2012-12-29T17:20:52.720 に答える
0

$(':not(#sub,#subnav)').hover(function () {基本的には、「orでない ものがある場合、何かを行うことを意味します（さらに、ハンドラーを数回アタッチしています）#sub#subnav

あなたが欲しいのは

$("#sub").hover(
  function(){
    $(this).children('.subnav').slideDown('fast');
  },function(){
    $(this).children('.subnav').slideUp('fast');
  }
}

jQuery#hover1 つまたは 2 つの関数を引数として取ります。2 つの関数が指定されている場合、最初の関数はマウスの入力時に呼び出され、2 番目の関数はマウスから離れたときに呼び出されます。1 つの関数が指定されている場合は、両方の場合に呼び出されます。
ドキュメント: http://api.jquery.com/hover/

if.subnavは hovered であることに注意して#subください。したがって、両方をチェックする必要はありません。

于 2012-12-29T17:20:59.073 に答える
0

jsBin デモ 1

$('.topnav #sub').hover(function() {
    $(this).find('.subnav').stop().slideToggle('fast');
});

または、ファンシーが好きなら;)

jsBin デモ 2

$('.topnav #sub').on('mouseenter mouseleave',function( e ) {
    var slideDir = e.type=='mouseenter' ? 'slideDown' : 'slideUp';
    $(this).find('.subnav').stop()[slideDir]('fast');
});
于 2012-12-29T17:23:40.143 に答える