Question

我的菜单有点问题。

情况就是这样：

＆＃13;

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

＆＃13;

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

＆＃13;

这就是我现在所拥有的。所以，我点击了按钮，div淡入。但是，我不能做下一步。我现在想要这个＆＃39; div1＆＃39;单击页面上的任何其他位置时淡出，只是不在该div和按钮上。

实施例：我点击＆＃39; btn＆＃39;，＆＃39; div1＆＃39;显示在屏幕上，然后我将鼠标移到＆＃39; div1＆＃39;区域并点击页面上的任何其他位置，然后点击＆＃39; div1＆＃39;淡出（隐藏）。

有人可以帮助我吗？

TNX

Answer 1

检查点击事件目标。

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

Answer 2

使用tabindex="-1"使div可聚焦，然后向div添加.on('blur', function() {})事件（并使用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();
});

单击Jquery菜单滑入

5 个答案: