javascript - 如何使用jquery fadeToggle

Question

大家好，我想学习如何为我的 使用 jquery fadeToggle DEMO

在此演示中，您可以看到有一个click show div div。当您单击此 div 时，将显示 .gelen-mesaj-alani。我的问题是当点击其他区域时如何隐藏这个div？

$(document).ready(function(){
  $('.click').on('click',function(){
     $(".gelen-mesaj-alani").fadeToggle(300);
  });                  
});

Answer 1

可以在body上绑定(bind)点击事件。如果目标没有最接近的类 .click 或 .gelen-mesaj-alani 元素，则隐藏该元素:

$('body').on('click', function(e) {
 if($(e.target).closest('.click').length == 0 && $(e.target).closest('.gelen-mesaj-alani').length==0) {
    // click happened outside of menu, hide any visible menu items
   $(".gelen-mesaj-alani").fadeOut(300);
}});

<强> Working Demo