0

メニューの HTML は次のとおりです。

<div class="navLink four">
    <div>
        <a href="this.php">this</a>
        <div class="subMenu">
            <a href="link.php">link</a>
            <a href="link.php">link</a>
        </div>
    </div>
</div>

メニューを表示および非表示にするためのこのjQueryがあります：

$('.navLink div').hover(
  function () {
    $('.navLink div .subMenu').css({'display': 'none'});
    $(this).find('.subMenu:first').slideDown();
  },
  function () {
    $('.navLink div .subMenu').css({'display': 'block'});
    $(this).find('.subMenu:first').slideUp();
  }
);

そしてこのCSS：

.navLink .subMenu {
    display: none;
    position: absolute;
}
.navLink > div:hover .subMenu {
    display: block;
}

しかし、ドロップダウンにカーソルを合わせると、ドロップダウンが頻繁にちらつきます。javascriptに preventDefault() などが必要だと思います。

4

4 に答える 4

3

問題を示す JSfiddle は次のとおりです: http://jsfiddle.net/V5H3A/

これが解決策です：http://jsfiddle.net/jdfqW/1/

次のようにアニメーションを停止する必要があります。

$('.navLink div').hover(
    function () {
        $('.navLink div .subMenu').css({'display': 'none'});
        $(this).find('.subMenu:first').stop().slideDown();
    },
    function () {
        $('.navLink div .subMenu').css({'display': 'block'});
        $(this).find('.subMenu:first').stop().slideUp();
    }
);

さらに少ないコード行で、これを行うことができますhttp://jsfiddle.net/jdfqW/2/ :

CSS:

.navLink .subMenu {
    display: none;
    position: absolute;
}

Javascript:

$('.navLink div').hover(
    function () {
        $(this).find('.subMenu:first').stop().slideToggle();
    }
);

または、あなたが超冒険好きなら、 http://jsfiddle.net/jdfqW/3/のようにCSS3 だけですべてを行うことができます:

CSS

.navLink .subMenu {
    height: 0px;
    overflow: hidden;
    position: absolute;
    -webkit-transition:height 0.5s ease;
    -moz-transition:height 0.5s ease;
    transition:height 0.5s ease
}

.navLink:hover .subMenu {
    height: 20px;
}
于 2013-05-26T06:15:07.237 に答える
1 
$('.navLink div a:first').mouseenter(function () {
    $(this).next('.subMenu').slideDown(200);
}).mouseleave(function () {
    $(this).next('.subMenu').slideUp(200);
});

ちらつきなし---> http://jsfiddle.net/WK7We/

于 2013-05-26T06:17:04.290 に答える
0

動作中のjsFiddleデモ

と の.stop()前にメソッドを使用:.slideUp().slideDown()

$('.navLink div').hover(
    function () {
        $('.navLink div .subMenu').css({'display': 'none'});
        $(this).find('.subMenu:first').stop().slideDown();
        // HERE --------------------- ^
    },
    function () {
        $('.navLink div .subMenu').css({'display': 'block'});
        $(this).find('.subMenu:first').stop().slideUp();
        // HERE --------------------- ^
    }
);

参考文献:

  • .stop()- jQuery API ドキュメント

    一致した要素で現在実行中のアニメーションを停止します。

于 2013-05-26T06:11:42.890 に答える
0

使用stop()...これは、ちらつきを引き起こしていると思われる実行中のアニメーションを停止します...

$(this).find('.subMenu:first').stop().slideDown();
$(this).find('.subMenu:first').stop().slideUp();
于 2013-05-26T06:12:12.913 に答える