通过点击其他地方关闭切换框？

Question

我有一个简单的打开关闭切换框fiddle here，并想知道是否可以通过点击网站上的任何其他位置（以及当前按钮）（不一定是其他链接）空格，任何地方等来关闭它..

$(document).ready(function() {
       $('a.show_hide').click(function() {
           $('.hidden-menu').toggle();
           $(this).toggleClass('close');
       });
   }); 

Answer 1

Updated Fiddle

1. 使用$(document).click()绑定或捕获点击事件 - 网站上的其他任何位置。

2. 在原始a点击事件中使用event.stopPropagation()。这会阻止事件冒泡。

3. 并且，请勿在{{1​​}}函数中使用.toggle()，因为它也会$(document).click()元素。

---

检查此代码段。

show()

您也可以使用$(document).ready(function () { $('a.show_hide').click(function (event) { event.stopPropagation(); $('.hidden-menu').toggle(); $(this).toggleClass('close'); }); $(document).click(function (e) { $('.hidden-menu').hide(); $('a.show_hide').removeClass('close'); }); }); 代替$(document)： Demo

Answer 2

这就是您所需要的：http://jsfiddle.net/5jzUD/9/

$(document).ready(function() {

    $(document).on('click',function(clickPosition){
        if (!$('.hidden-menu, a.show_hide').is(clickPosition.target)    && $('.hidden-menu').has(clickPosition.target).length === 0){
            $('.hidden-menu').hide();
           $('a.show_hide').addClass('close');
            }
        else{
            if($('a.show_hide').is(clickPosition.target) && $('.hidden-menu').css('display')!='none'){
                $('.hidden-menu').hide();
               $('a.show_hide').addClass('close');
                return;
            }
            $('.hidden-menu').show();
           $('a.show_hide').removeClass('close');
        }
    });
});