1

次の Web サイトをセットアップしました [サイトの場所を編集しました] (まだ始まったばかりなので、トップ ボタンと最初のレベルのメニューのみが機能します)。

[Request It] ボタンにカーソルを合わせると、[Request It menu] が表示されます。
私は2つのことを理解する必要があります:

  1. マウスがメニューボタンまたはサブメニュー自体から離れたときにメニューを非表示にするにはどうすればよいですか?
  2. すべてのボタンに対して jQuery を記述するよりも、これを行うためのよりエレガントな方法はありますか (つまり、すべてのボタンで機能するより一般的なコードを記述できますか)。

これまでに使用したjQueryは次のとおりです。

$(document).ready(function(){
    $('request-it-menu').hide();
    $('#request-it-button, #request-it-menu').mouseenter(function() {
        $('#request-it-menu').show();
        $('#request-it-button, #request-it-menu').mouseleave(function() {
            $('request-it-menu').hide();
        });
    });
});
4

6 に答える 6

5

では、行きましょう。まず、「サブメニュー」を隠しやすくするために、各サブメニューにクラスを追加しました。これにより、CSS だけでなく、jquery の代入についても、1 つのフォーカル ポイントを呼び出すことができます。

<div id="request-it-menu" class="sub-menu">

css では、サブメニューに非表示の表示と相対的な位置を与えることを除いて、ここでは特別なことはしませんでした。これで、好きなように再設計できます。サブメニューを を使用して配置できるように、ここで相対的な位置を指定しtopました。

.sub-menu { display: none; position: relative; }

以上で、JavaScript にたどり着きます ... ほとんどです! もう一つ！You're menu HTML では、各画像にデータ変数を追加しました。この変数を使用してID、各の を保持しました.sub-menu。これは必要ありません。画像 ID からボタンという単語を削除してメニューに変更するという複雑なステートメントを作成することもできますが、なぜ複雑になるのでしょうか。

<img id="request-it-button" data-submenu="#request-it-menu"

ついに！JavaScript。この時点で、データ変数のおかげで、呼び出しを「動的」と「単一」の両方にするのは非常に簡単です。最初に、jQuery の .on() メソッドのデリゲート バージョンを使用して、指定されたセレクターの動的要素にもマウス イベントを追加します。セレクター自体は「ブランケット」ステートメントです。つまり、非常に単純な説明に適合するすべてのものを取得します。この場合、私は単純にヘッド メニュー ID を img の内部に直接使用します。

$(function() {  //  same as $(document).ready(function() { ...
    //  calling this way in jquery is using "delegate" form of .on
    //  this assures function to even dynamic elements of the fitting selector
    $(document).on("mouseenter", "#topMenu > img", function(e) {
        var menu = $(this).data("submenu");
        //  position part here is temporary till you decide how you want css to arange sub menu's
        $(menu).css("top", $(this).position().top-9).show();
    })
    .on("mouseleave", "#topMenu > img", function(e) {
        var menu = $(this).data("submenu");
        $(menu).hide();
    })
})

完全な作業例

コメントに基づいて修正

$(function() {
    var tmrSubMenu;
    $(document).on("mouseenter", "#topMenu > img", function(e) {
        $(".sub-menu").hide();
        var menu = $(this).data("submenu");
        $(menu).css("top", $(this).position().top-9).show();
    })
    .on("mouseleave", "#topMenu > img", function(e) {
        var menu = $(this).data("submenu");
        tmrSubMenu = setTimeout(function() { $(menu).hide(); }, 100);
    })
    .on("mouseenter", ".sub-menu", function(e) {
        clearTimeout(tmrSubMenu);
    })
    .on("mouseleave", ".sub-menu", function(e) {
        $(this).hide();
    })
})
于 2013-06-19T14:16:43.603 に答える
1

これで、通常、次のすべてのサイドメニューが完了します

html :

<img id="request-it-button" src="request-it.png" alt="request-it" width="220" height="50" data="request-it" class="menu-button">
<img id="repair-it-button" src="repair-it.png" alt="repair-it" width="220" height="50" data="repair-it" class="menu-button">
...

<div id="request-it-menu" style="display: block;" class="request-it menu-context">
...
</div>
<div id="repair-it-menu" style="display: block;" class="repair-it menu-context">
...
</div>
...

js

$(document).ready(function(){
    //hide all sub menu with the class menu-context
    $('.menu-context').hide();

    //for each element having the class menu-button
    $('.menu-button').hover(
        function() {    //mouseenter
            //find the matching menu designated by the data attribute
            var desig = $(this).prop("data");
            $('.'+desig).show();
        },
        function() {    //mouseleave
            //find the matching menu designated by the data attribute
            var desig = $(this).prop("data");
            $('.'+desig).hide();
        }
    );
})
于 2013-06-19T13:55:22.587 に答える
0 
$(document).ready(function(){
    $('#request-it-menu').hide();

    $('#request-it-button, #request-it-menu').hover(function() {
        $('#request-it-menu').toggle();
    });
});
于 2013-06-19T13:55:31.783 に答える
0

この数週間、私はこのトピックについて多くの調査を行ってきました。多くの投稿を読んだ後、この問題に対する満足のいく答えを見つけることができませんでした。だから手を汚すことにした。

マウスアウト時にメニューを非表示にするために私が書いたユーティリティスクリプトを次に示します。

util.watchMouseOut=function(id,cb){
    this.shown=true;
    this.statecheck={};
    $(id).children().mouseout(function() {
            shown=false;
            dostatecheck();
        }).mouseover(function() {
            shown=true;
            dostatecheck();
        });

    this.dostatecheck=function(){
        try{
            setTimeout(function(){
                try{
                    clearTimeout(this.statecheck);
                }catch(e){}
            },5);
        }catch(e){}
        this.statecheck=setTimeout(function(){
            if(!shown)
            {
                cb();
            }
        },20);
    };

}

mouseover イベントと mouseout イベントはマウスが離れたことを検出できますが、メニュー項目から次の項目へマウスが移動するという問題もあります。これにより、非表示メニューの呼び出しもトリガーされます。変数 'shown' を、マウス ホバー時に true に設定し、マウス アウト時に false に設定します。アイテム間を移動すると、2 回反転します。次に、20 ミリ秒の遅延の後、最後に表示された変数値をチェックして、非表示イベントが有効であることを確認します。

このコードを使用するときは、次のように呼び出します。

var watch=new util.watchMouseOut('#menuid',function(){
    hidemenu();
});

hidemenu() 関数を別の場所に実装する必要があります。

于 2013-06-23T19:50:16.747 に答える