jQuery關閉/切換div通過點擊正文

Question

在這個小jsFiddle http://jsfiddle.net/PcWjA/22/我試圖做一個ul go顯示：沒有當有一個點擊身體（或任何地方不是上的項目）和工作的第一個時間有一個點擊身體。但在此之後，腳本似乎循環顯示/隱藏ul閃存。

Answer 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); 
     //} 
    }); 
});​ 

Answer 2

問題是您正在重複註冊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); 
    } 
}); 

Answer 3

簡單地取消綁定體click事件這將解決您的問題。

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