0

クリックするとボタンの右側にメニューがポップアップするボタンがあります。このメニューはかなり大きなULリスト項目です。このメニューが表示されているページには、他にも多くの要素が含まれています。

メニューがポップアップしたら、ユーザーはメニューのオプションをクリックすると、メニューが消えます（menu.hide（））。

しかし、他の方法でメニューを取り除くことができないのは不思議な感じがします。「ユーザーがメニュー以外をクリックすると、メニューが非表示になる」というアイデアが好きです。しかし、メニュー以外のすべてにイベントをバインドする「clickoutside」イベントを実行するのは嫌いです。

もう1つのオプションは「マウスアウト」ですが、メニューに移動するにはマウスが画面上を移動する必要があるため、「マウスアウト」は常に早すぎます。

ユーザーが自然に、そして自由にそれを取り除くことができるように、どのイベントをメニューにバインドできるかについてのアイデアはありますか？（オプションをクリックしたときだけでなく）

4

2 に答える 2

1

メニューが開いているときに、1つのイベントを本文にバインドできます。クリックイベントを使用して、クリックがメニューの外で発生したかどうかを判断します。メニューの外にある場合は、メニューを非表示にしてバインドを削除します。

// binding function     
closeMe = function(e) {
    var $target = $(e.target);
    // click is not inside the menu
    if(!$target.hasClass('menu') && $target.parents('.menu').length !== 1) {
        // hide menu
        menu.hide();
        // unbind events
        $('body').unbind('mousedown.menuhide', closeMe);
    }
};
// show menu
menu.show(function() {
    // bind menu hide event
    $('body').bind('mousedown.menuhide', closeMe);
});
于 2012-10-01T19:30:02.293 に答える
0

とても簡単です。このようなものを使用してください

$('html').click(function() {
    menu.close();
});

$('#menu').click(function(e){
    e.stopPropagation();

    // do stuff
    // maybe some nice animation or w/e

    menu.close();
});
于 2012-10-01T19:16:17.930 に答える