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", затем добавить .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(); 
});