3

質問は少し複雑かもしれませんが、言い換えれば、メニューがあります ( jsfiddleを参照)

div にカーソルを合わせると、ドロップダウンが表示されます。マウスを離すと、ドロップダウンが消えます。ここまでは順調ですね。

問題は、マウスがドロップダウンの上にある場合でもメニューを開いたままにしたいということです。

ex: if($elem).not(":hover"){..}

いくつかのコード:

<div class="top_menu_item">
    <div class="hover_item">
        <a href="#">TEST</a>
    </div>
    <div class="drop_item" style="display: none;">
        <div>
            <a href="#">My test</a>
        </div>
        <div class="">
            <a href="#">Add test</a>
        </div>
        <div>
            <a href="#">Remove test</a>
        </div>
    </div>

$(document).ready(function () {
    var elem = new Array();
    var len = $(".hover_item").length;
    var i = 0;
    while (i < len) {
        elem[i] = $(".hover_item:eq(" + i + ")");

        i = i + 1;
    }
    $.each(elem, function (key, val) {
        hoverFunc(val);
    });

});

function hoverFunc($elem) {

    $elem.hover(function () {
        if ($elem.next().is(":hidden")) {
            $elem.next().slideDown("fast");
        }
    });

    $elem.mouseleave(function (e) {
        // here should be :  if the mouse is not hovering over the dropdown, then
        $elem.next().slideUp("fast");
    });

    $elem.next().mouseleave(function (e) {
        $elem.next().slideUp('fast');
    });
}

誰かが私の質問を再フレイズして、私の言いたいことを言うことができるなら、そうしてください。

ありがとう

4

2 に答える 2

6

それを行うのにJavaScriptは必要ありません：CSSソリューション。

サブメニュー（.drop_item）を子要素としてトリガー要素（.hover_item）に追加し、CSSを追加するだけです。

.drop_item { display: none; }
.hover_item:hover .drop_item { display: block; }​
于 2012-05-29T17:46:51.807 に答える
1

これを試してみてください。

nextElem のマウス ホバー イベントを追加しました。また、$elem.Next() を参照する代わりに、より効率的になるように変数をクリーンアップし、設定するだけです

var nextElem = $elem.Next()

そしてこれを追加しました

  nextElem.hover(function () {
    if ($elem.is(":hidden")) {
        $elem.slideDown("fast");
    }

});

http://jsfiddle.net/fmTnh/3/

于 2012-05-29T17:56:01.187 に答える