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 回答