0

私はdivで作られたメニューを持っており、divの1つにはドロップダウンを下にスライドするJQueryのmouseenter関数があります。

$(".dropdownLauncher").mouseenter(function() {
  $(".dropdown").slideDown("slow");
});

ドロップダウンをスライドさせてマウスを上に戻し、ドロップダウンを離れる機能もあります。

$(".dropdown").mouseleave(function() {
  $(".dropdown").slideUp("slow");
});

これは問題ありませんが、ユーザーがマウスをランチャーの上に移動すると、ドロップダウンを経由せずに、メニューが下に留まる場合を除きます。

マウスがどちらかのdivにあるかどうかを確認することはできますか？

編集1：マークアップ：

<div class="menu">
                <div class="menuItem selectedItem">Home</div>
                <div class="menuItem unselectedItem leftBorder dropdownLauncher">About <img src="Arrow.gif"></div>
                <div class="dropdown">
                    <div class="menuItem unselectedItem dropdownItem topBorder">Beep</div>
                    <div class="menuItem unselectedItem dropdownItem topBorder">Beep</div>
                    <div class="menuItem unselectedItem dropdownItem topBorder">Beep</div>
                </div>
                <div class="menuItem unselectedItem leftBorder">Visiting</div>
                <div class="menuItem unselectedItem leftBorder">Newsletters</div>
                <div class="menuItem unselectedItem leftBorder">Ecology</div>
            </div>
4

1 に答える 1

0

まあ、この方法はかなりバグがあります...任意のメニュー（ブラウザメニューなど）を開き、マウスを動かします-それは非表示ではありません。これは通常の方法です。どこかをクリックすると、メニューが非表示になります（したがって、クリックイベントハンドラーをドキュメントにアタッチできます）。サブメニューに移動しても、マウスをその上に置くと表示され、マウスを別のメニュー項目に移動すると非表示になります。ただし、マウスをメニューの外に移動しても、サブメニューは非表示になりません。

それでもアイデアを実装したい場合は、ユーザーのアクションを制御するための複雑なシステムを実装する必要があります。dropdownLauncherにmouseleaveハンドラーを追加し、そのユーザーがこのアイテムを離れたことを登録し、ドロップダウンメニューの非表示をトリガーします。ドロップダウンメニューを非表示にする関数で、マウスがドロップダウンメニューの上にあるかどうかを確認します-非表示をキャンセルします。それ以外の場合は非表示にします。その変数の状態をクリーンアップすることを忘れないでください（「左dropdownLauncher」）。たとえば、ユーザーがランチャーを離れてから1秒で非表示のドロップダウンメニューを実行できます。

また、ユーザーがマウスを非常に速く動かすと（ぎくしゃくするだけ）、ブラウザーがいくつかのイベントをトリガーする時間がないことに注意してください（mousemoveで問題が発生しました）...必ずこのケースをテストしてください。

さて、コードは添付されていませんが、あなたがアイデアを得ることを願っています。

更新：おそらくあなたはもうこの質問に興味がないでしょう（答えはとても遅いので、私は理解しています;）、しかし私は非常に興味深い解決策を見つけました、サポートするのは簡単です：

[例]ページをクリックします

そのページを開くと、メニューがあります。私が理解したように、これはあなたが実装したいものです（私はメニューナビゲーションの同じ振る舞いを意味します）。JavaScriptコードを見て、それが非常に小さいことに気づきました。さらに、それはそのメニューとは関係がありません...それで、彼らは純粋なHTML+CSSを使用してそれを実行していることは明らかでした。小さなcssファイルを見てください。また、メニューのhtmlマークアップも見てください。

<div id="rootMenu" class="menustyle">
  <ul class="menubar">
      <li class="topitem">
        <a class="selected" href="_link_"><img border="0" src="/click-examples/assets/images/home.png" alt=" Home" class="link"> Home</a>
        <ul class="submenu">
           <li>
              <a title="BorderPage Java source" target="_blank" href="_link_">BorderPage Class</a>
           </li>
           <li>
              <a title="Page border HTML template" target="_blank" href="_link_">Border Template HTML</a>
            </li>
            ....
        </ul>
      </li>
      ....
   </ul>
   ....
</div>

他のすべてはcssによって行われます（具体的には：hover pseudo-classによって）。私はそのアプローチが好きでした。だから今、あなたは少なくとも;）代替手段を持っています

于 2011-02-01T19:37:35.860 に答える