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(); 
});