0

クリックするとポップアップメニューがアクティブになるボタンに問題があります。メニューがポップアップしているときに、もう一度ボタンをクリックすると、ポップアップが消えます。しかし、ボタンをもう一度クリックすると、ボタンの外側のどこかをクリックするまでメニューが表示されません。問題は、イベントをバインドする「html」であるセレクターとともに、ワンクリックイベントにあると思います。何か案は？

GetDropDownButton: function (option, thisId) {
        var menu = $('#' + option);
        // shows the popup
        menu.show();

        setTimeout(function () {
            // idea is to click anywhere to allow popup to close
            $('html').one('click', function () {
                // hides the popup
                menu.hide();
            });
        }, 100);
    },
4

2 に答える 2

1

JavaScript イベントのバブリング効果で問題が発生していると思います。ボタンをクリックすると、そのクリック イベントが最初にトリガーされ、次にその親のクリック イベントが、DOM からドキュメント ルートまでずっとトリガーされます。あなたの解決策は、jQuery から stopPropagation 関数を適用することだと思います。ここに小さな例を設定します: http://jsfiddle.net/FF73h/

非常に小さなコードなので、ここにも貼り付けます: HTML

<div class="popup">
    popup!
</div>
<button class="btn-toggle">on/off</button>​

JS

// make the button show/hide the popup
$('.btn-toggle').click(function(e) {
    $('.popup').toggle(); 
    // prevent the handler for the document to be called as well, wich would hide again
    e.stopPropagation();  
});
// make the popup close when clicked anywhere in the document
$(document).click(function() {
    $('.popup').hide();
});
// optional: prevent the popup from closing when clicked inside it, stops the ducoment event from beeing called
$('.popup').click(function(e) {
    e.stopPropagation();            
});

コードはそれ自体を説明する必要があると思います。そうでない場合は、お気軽にお知らせください。

于 2012-08-17T19:55:27.050 に答える
0

bodyではなく使用してみましたhtmlか？

 $('body').one('click', function () {
    // hides the popup
    menu.hide();
 });
于 2012-08-17T19:15:17.367 に答える