如何使用jquery fadeToggle

How to use jquery fadeToggle

本文关键字：fadeToggle jquery 何使用      更新时间：2023-10-23

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

在这个演示中，你可以看到一个点击显示div的div。当你点击这个div时，就会显示.gelen-mesaj-alani。我的问题是，当点击其他区域时，如何隐藏这个div？

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

您可以在body上绑定点击事件。如果目标没有类为.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);
}});

工作演示

可能重复：当用户点击外部时，使用jQuery隐藏div

$(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();
    }
});
相关文章：