Jquery菜单滑入点击

Question

我的菜单有点问题。

情况是这样的：

$(document).ready(function(){ 
 
    $('.btn').click(function(){ 
 
    $('.div1').fadeIn(); 
 
    }); 
 
})

<button class="btn">Menu</button> 
 
<div class="div1">some content</div>

这是我现在。所以，我点击按钮时，div会淡入。但是，我只是无法完成下一步。我现在想让这个'div1'在页面上的其他任何地方淡出，只是不在该div和按钮上。

例如： 我点击'btn'，'div1'出现在屏幕上，然后我将鼠标移动到'div1'区域之外，然后单击页面上的任何其他位置，然后'div1'淡出（隐藏）。

有人可以帮助我吗？

Tnx

Answer 1

使与tabindex="-1"在div可聚焦，再加入一个.on('blur', function() {})事件到div（和与CSS除去焦点轮廓）：

$('.btn').on('click', function() { 
 
    $('.div1').fadeIn(); 
 
    $('.div1').focus(); 
 
}); 
 

 
$('.div1').on('blur', function() { 
 
    $(this).fadeOut(); 
 
});

.div1 { 
 
    background-color: #eee; 
 
    padding: 1em; 
 
    display: none; 
 
    outline: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button class="btn">Menu</button> 
 
<div class="div1" tabindex="-1">some content</div>

Answer 2

检查点击事件目标。

$(document).click(function (event) { 
    if (!$(event.target).hasClass('.btn') && !$(event.target).hasClass('.div1')) { 
     $('.div1').fadeOut(); 
    } 
}); 

Answer 3

用途：

$('body').click(function(evt){  
     if(evt.target.id == "main_btn") 
      return; 
     //For descendants of main_btn being clicked, remove this check if you do not want to put constraint on descendants. 

    $('.div1').fadeOut(); 
     if($(evt.target).closest('#main_btn').length) 
      return;    

     //Do processing of click event here for every element except with id main_btn 
}); 

段：

$('.btn').click(function(){ 
 
     $('.div1').fadeIn(); 
 
    }); 
 

 
$('body').click(function(evt){  
 
     if(evt.target.id == "main_btn") 
 
      return; 
 
     //For descendants of menu_content being clicked, remove this check if you do not want to put constraint on descendants. 
 
    
 
    $('.div1').fadeOut(); 
 
     if($(evt.target).closest('#main_btn').length) 
 
      return;    
 

 
     //Do processing of click event here for every element except with id menu_content 
 
    
 
    
 

 
});

.div1 { 
 
    display: none; 
 
} 
 

 
html, body { 
 
    width: 100%; 
 
    height: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="main_btn" class="btn">Menu</button> 
 
<div class="div1">some content</div>

希望这有助于！

Answer 4

当衰落div1，淡入一个透明div填充整个屏幕。然后处理点击此全屏幕将关闭一切。

HTML：

<button class="btn">Menu</button> 
<div class="div1"> 
    <div class="screen"></div> 
    <div class="content">some content</div> 
</div> 

的javascript：

$(document).ready(function(){ 
    $('.btn').click(function(){ 
     $('.div1').fadeIn() 
    }) 

    $('.screen').click(function() { 
     $('.div1').fadeOut()    
    }) 
}) 

CSS：

.screen { 
    position: absolute; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
} 

Answer 5

$(window).click(function() { 
//Hide the div1 
}); 

$('.div1').click(function(event){ 
    event.stopPropagation(); 
});