0

ページにカスタムドロップダウンメニューを作成しましたHTML+ JavaScript。そのメニューを次のように機能させたい：

  • 「Freunde」ボタンをクリックすると、ドロップダウンメニューが表示されます
  • ボタンをもう一度クリックすると、ドロップダウンメニューが消えます
  • マウスキュラーがボタン+ドロップダウンメニューの「領域」を離れると、消えます

ドロップダウンメニューは、複数のdivを含むメインdiv（「メニュー項目」）で構成されています。

私の最初のアプローチはドロップダウンメニューのメインdivに置くことでしたがonmouseout()、次の問題があります。内側のdivにカーソルを合わせるとすぐにonmouseout()真になり、内側のdivがメインのdiv全体を満たすため、ドロップダウンメニューは、ユーザーがそのメニューにカーソルを合わせない限り表示されます。

そこで、JQueryライトボックスと同じように解決しようとしました。つまり、画面全体に「背景」divを配置し、そこにドロップダウンメニューを貼り付けて、そこに設定しonmouseover()ました。それはほぼ完璧ですが、「Freunde」ボタンもその影響を受けます。

では、異なる要素からのイベントを組み合わせる方法はありますか？好き

if(cursor is not over Button && cursor is not over DDMenu)  set invisible

次の画像で希望をマークしました

ここに画像の説明を入力してください

4

1 に答える 1

0

あなたが次のように設定されていると仮定します

<ul>
    <li></li>
    <li></li>
</ul>

次のように CSS を設定できます。

#nav ul li ul { display: none; }
#nav ul li.active:hover ul { display: block; }

次に、次のように JS を設定します。

var menuClick = function() {
    $(this).toggleClass('active');
    menuHover();
};
var menuHover = function() {
    $('#nav li.active').hover(function() {

    }, function() {
        $(this).removeClass('active');
    });
});

$('#nav > ul > li').on('click', menuClick);

確かに、これはまったく大雑把なコーディングですが、うまくいくはずだと思います。(これは、jQuery ライブラリを使用していることも前提としています)。

于 2012-11-13T21:07:42.993 に答える