Question

在这个小jsFiddle http://jsfiddle.net/PcWjA/22/中我试图进行ul go显示：当身体上有一个点击时（或者列表项上不的任何地方）并且可以显示第一次点击身体。但之后脚本似乎循环并显示/隐藏ul闪烁。

Answer 1

jQuery(document).ready(function() {
    jQuery('.hour_dropdown').hide()
    $(window).click(function (event) {
        if ($(event.target).hasClass("hour_dropdown") ||
            $(event.target).parents(".hour_dropdown").size() > 0 ||  
            $(event.target).hasClass("more")){
                 // do nothing....
            } else {
                    $('.hour_dropdown').fadeOut(200);
            }
    });
    jQuery('.more').click(function() {
        //if ($('.hour_dropdown').css("display")=="none") {
            $('.hour_dropdown').fadeToggle(200);
        //}
    });
});

Answer 2

问题是你正在重复注册body.click处理程序，并且从不删除它。 jQuery维护一个事件监听器列表，因此当您多次添加相同的单击处理程序时，每次单击都会多次执行。

我会在document.ready事件中设置一次body click处理程序，并让它只隐藏当前可见的小时下拉，如：

jQuery('.more').click(function() {
    if ($('.hour_dropdown').is(':hidden')) {
        $('.hour_dropdown').fadeToggle(200);
    }
});

jQuery('body').click(function() {
    if ($('.hour_dropdown').is(':visible')) {
        $('.hour_dropdown').fadeOut(200);
    }
 });

Answer 3

简单地取消绑定身体点击事件，这将解决您的问题。

jQuery(document).ready(function() {
    jQuery('.hour_dropdown').hide()

    jQuery('.more').click(function() {
        if ($('.hour_dropdown').is(':hidden')) {
            $('.hour_dropdown').fadeToggle(200);
            $("body").unbind();

        } else {
            $('body').click(function() {
                $('.hour_dropdown').fadeOut(200);
            });
        }
    });

});

Answer 4

那怎么样（希望这是正确的行为）：

jQuery(document).ready(function() {

    var element = $('.hour_dropdown');
    element.hide();

    $('body').click(function(event) {        
       if ( ('more' ==  $(event.target).attr('class') ) || (0 <  $(event.target).parents('.more').length ) ) {
          element.fadeIn(200);        
       } else {
          element.fadeOut(200);
       }
    });
});

它检查被点击的元素是否与类more完全相同，或父类是否具有此类。它还将具有类.hour_dropdown的元素存储在变量中并减少请求，并且它只有一个事件处理程序。 fiddle

Answer 5

我通常不会将这些类型的事件绑定到正文，因为事件冒泡会变得很难。我建议制作一个出现的固定叠加层并处理关闭事件：

http://jsfiddle.net/PcWjA/33/

jQuery(document).ready(function() {
    jQuery('.hour_dropdown').hide()

    $('.more').on('click', function() {
        $('.hour_dropdown').fadeToggle(200);
        $('#overlay').show();
    });

    $('#overlay').on('click', function() {
        $('.closeable').fadeOut();
        $(this).hide();
    });
});

Answer 6

为此范围指定一个ID：<span id="more" class="more"> 并修改你的JS代码：

jQuery(document).ready(function() {
    jQuery('.hour_dropdown').hide()

    jQuery('.more').click(function() {
        if ($('.hour_dropdown').is(':hidden')) {
            $('.hour_dropdown').fadeToggle(200);
        } else {
            $('body').click(function(event) {
              if(event.target.id!="more")

                $('.hour_dropdown').fadeOut(200);
            });
        }
    });
});

您现在更新的小提琴如下所示：Demo

jQuery通过单击body来关闭/切换div

6 个答案: