0

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

4

6 回答 6

1

我有另一个答案 http://jsfiddle.net/FfBzT/

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);
        //}
    });
});​
于 2012-08-08T00:33:12.730 回答
0

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

我将在 document.ready 事件中设置一次正文单击处理程序，并让它仅在当前可见时隐藏小时下拉列表，例如：

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);
    }
 });
于 2012-08-08T00:26:09.387 回答
0

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

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);
            });
        }
    });

});
于 2012-08-08T00:26:43.793 回答
0

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

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在一个变量中并减少请求，并且它只有一个事件处理程序。 小提琴

于 2012-08-08T00:33:01.797 回答
0

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

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();
    });
});​
于 2012-08-08T00:38:15.203 回答
0

像这样为跨度提供一个 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

于 2012-08-08T00:54:02.610 回答