單擊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

檢查點擊事件目標。

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

Answer 2

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