0

ドロップダウン div ('#units-menu-links') にカーソルを合わせている場合でも、ホバー時に開いたままになるドロップダウン メニューを作成しようとしています。ユーザーがまだ 'units-menu-links' div にカーソルを置いている間、開いたままにすることはできません。現在は何もしませんが、ユーザーが「#units-nav」divにカーソルを合わせていないときはいつでも消えるようにする2番目の関数内に.toggleを入れる前に。

私のHTMLは次のようになります。

<div id="units-menu-links">
    <center>
            <p class="units-menu-links-items" href="dynamically generated URL">Menu Item</p>
    </center>
</div>

<div id="menu">
        <div id="menu-inside">
                <div class="bar">
                        <div class="nav-block" id="units-nav">
                                <a href="/link/">Menu Button</a>
                        </div>
                </div>
        </div>
</div>

これが私のJqueryです：

$('#units-menu-links').hide();
    $("#units-nav").hover(
            function () {
                // Over the hover.
                $('#units-menu-links').toggle();
            },
            function () {
                // PLEASE READ THE FOLLOWING COMMENTS TO UNDERSTAND THE FUNCTIONALITY I AM TRYING TO GET.
                // When the users leaves #units-nav and #units-menu-links
                // then do the "$('#units-menu-links').toggle();" again to hide this.
                // However if the user is hovering over "$('#units-menu-links').toggle();" then don't do anything.
            }
    );

(私は SO でかなりの数の質問と回答を見たり、Google を見たりしましたが、この問題を解決するのに役立つものは何も見つかりませんでした。これは非常に一般的な問題のようですが、人々は自分のHTML 構造が私のものとは異なるため、リソースを見つけるのが難しくなっています。)

4

3 に答える 3

1

マウスがサブメニューの外に出たときにメニューを非表示にしてみてください。

$('#units-menu-links').hide();
$("#units-nav").hover(
    function () {
        $('#units-menu-links').show();
    },
    function () {
    }
);
$("#units-menu-links").hover(
    function () {
    },
    function () {
        $('#units-menu-links').hide();
    }
);

​

理想的には、JavaScriptを使用しないことをお勧めします。

HTML：

<div id="menu" style="background-color: red">
    <div id="menu-inside">
        <div class="bar">
            <div class="nav-block" id="units-nav">
                <a href="/link/">Menu Button</a>
            </div>
        </div>
    </div>
    <div id="units-menu-links" style="background-color: green">
        <center>
            <p class="units-menu-links-items" href="dynamically generated URL">Menu Item</p>
        </center>
    </div>
</div>

CSS：

#menu #units-menu-links {
    display: none;
}

#menu:hover #units-menu-links {
    display: block;
}
​

これがフィドルです。

于 2012-07-27T07:35:44.083 に答える
1 
$('#units-menu-links').hide();
var timeOut;
$("#units-nav").hover(
    function () {
        // Over the hover.
        $('#units-menu-links').show();
        clearTimeout(timeOut);
    },
    function () {
        timeOut = setTimeout(function(){
            $('#units-menu-links').hide();
        }, 100);
    }
);

$('#units-menu-links').hover(
    function () {
        clearTimeout(timeOut);
    },
    function () {
        timeOut = setTimeout(function(){
            $('#units-menu-links').hide();
        }, 100);
    }
)
于 2012-07-27T07:55:01.730 に答える
0

ホバーを使用するときは、#units-nav要素の下にサブメニューをネストする必要があります。それはうまくいくでしょう。それができない場合は、ホバー関数の 2 番目のコールバックにタイムアウトを実装し、ユーザーがホバーする場合にタイムアウトを停止できます#units-menu-links-element。

于 2012-07-27T07:35:48.823 に答える