Question

大家好我想学习如何使用jquery fadeToggle来实现 DEMO

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

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

Answer 1

您可以绑定正文上的click事件。如果target没有与类.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

Answer 2

可能重复：Use jQuery to hide a DIV when the user clicks outside of it

$(document).mouseup(function (e)
{
    var container = $("YOUR CONTAINER SELECTOR");

    if (!container.is(e.target) // if the target of the click isn't the container...
        && container.has(e.target).length === 0) // ... nor a descendant of the container
    {
        container.hide();
    }
});

如何使用jquery fadeToggle

2 个答案: