0

このドロップダウンを正しく動作させるのに多少の困難があります。ドロップダウンされた要素にカーソルを合わせると、開いたままになります。マウスがその要素の上に置かれているかどうかを 0.5 秒ごとにチェックし、そうであれば何もせず、そうでなければドロップダウン メニューを閉じる関数を作成しました。これが私の意味を確認するための私のフィドルです：http://jsfiddle.net/KyCyB/

ここに私のJSがあります:

$('.navBarClickOrHover').mouseover(function () {
    var targetDrop = $(this).attr('targetDropDown');
    if ($('.dropdownCont[isOpen="true"]').length != 0) {
        $('.dropdownCont[isOpen="true"]').attr('isOpen', 'false');
        $('.dropdownCont[isOpen="true"]').animate({
            "height": "0px"
        }, 200, function () {
            $('#' + targetDrop).attr('isOpen', 'false');
            $('#' + targetDrop).animate({
                "height": "200px"
            });
        });
    } else {
        $('#' + targetDrop).animate({
            "height": "200px"
        });
    }
}).mouseout(function () {
    var targetDrop = $(this).attr('targetDropDown');
    setTimeout(function () {
        if ($('#' + targetDrop).attr('isHoveredOver') == 'true') {
            //DONOTHING
        } else {
            $('#' + targetDrop).animate({
                "height": "0px"
            });
        }
    }, 500);
});

$('.dropdownCont[isOpen="true"]').mouseover(function () {
    $(this).attr('isHoveredOver', 'true');
}).mouseout(function () {
    $(this).attr('isHoveredOver', 'false');
});

長くて反復的なコードで申し訳ありません。正しく動作するようになったら、もう少しオブジェクト指向にするつもりでした。いじり続けて、思い通りに動作させようとしました。間違いなく立ち往生。以前にリンクを見逃したことがある場合は、ここにもう一度あります: http://jsfiddle.net/KyCyB/ これに対するヘルプまたは別のアプローチは素晴らしいでしょう! ありがとう！

4

2 に答える 2

1

cssでこれを行うことができます

ここに jsbin があります: http://jsbin.com/IsOFaJE/1/edit

また、javascript を使用してスライドダウン/アップするバージョンも作成しました: http://jsbin.com/IsOFaJE/2/edit

html は次のとおりです。

<div>
    title
    <ul>
        <li>menuitem</li>
        <li>menuitem</li>
        <li>menuitem</li>
    </ul>
</div>

CSSは次のとおりです。

ul {display: none; }
div:hover ul,
ul:hover { 
    display: block; 
}
于 2013-09-13T15:52:29.137 に答える
0

さらに約 30 分後、すべてのコードを消去し、新しい戦略を開始しました。これが私が思いついたもので、見事に動作します。

$('.navBarClickOrHover').mouseenter(function(){
            var targetDropDown = $(this).attr('targetDropDown');
            $('.dropdownCont').each(function(){
                $(this).css({
                    "height":"0px"
                });
            }); 
            setTimeout(function(){
                $('#'+targetDropDown).animate({
                    "height":"200px"
                });
            },500)

        }).mouseleave(function(){
            var targetDropDown = $(this).attr('targetDropDown');
            if($("#wrapper").find("#"+targetDropDown+":hover").length == 0){
                $('.dropdownCont').each(function(){
                    $(this).animate({
                        "height":"0px"
                    });
                });
            }
            else{
                $('#'+targetDropDown).bind('mouseleave', checkIfHoveredFunc);
            }
        });

        var checkIfHoveredFunc = function(){

            $('.dropdownCont').each(function(){
                $(this).animate({
                    "height":"0px"
                });
            });

        }
于 2013-09-13T17:32:57.697 に答える