Question

当我在全角标题的未填充空间内单击时，我想删除.visible类。

在标头中，我有.container，但没有全高。

当我单击容器或其链接时，它不应删除该类，但是当我单击容器下方的剩余空间时，则应删除该类。

使用给定的HTML和CSS可行吗？

$('body').on('click', '.button', function(){
  $('body').toggleClass('visible');
});
$('.visible *:not(.container)').click(function() {
  alert('clicked the outside');
  $('body').removeClass('visible');
  return false;
});

Answer 1

您可以将click事件绑定到<header>，将另一个click事件绑定到其内部<div>，并停止传播该事件，以便仅针对特定事件（div ）将被执行：

$( document ).ready(function() {
    $('body').on('click', '.button', function(){
      $('body').toggleClass('visible');
    });
    $('header').click(function() {
      alert('clicked outside the container');
      $('body').removeClass('visible');
      return false; 
    });
  $('.container').click(function(e){
    alert ('clicked inside the container');
    e.stopPropagation();
  })
});

* {
  padding:0;
  margin:0;
}
body.visible header {
  display:block;
}
header {
    top: 0;
    bottom: 0;
    position: fixed;
    overflow-y: scroll;
    overflow-x: hidden;
    background-color: rgba(0,0,0,.5);
    display: none;
    z-index: 999;
    width: 100%;
    overflow: visible;    
}
.container {  
  background: #ccc;
  padding:30px;
}
ul {
  padding:0;
  margin:0;
}
a {
  display:block;
}
.button {
  position:absolute;
  top:0;
  z-index:9999;
  background: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
  <body>
    <div class="button">Button</div>
    <header>
      <div class="container">
        <ul>
          <li><a href="#">asd</a></li>
          <li><a href="#">asdas</a></li>
          <li><a href="#">asdsa</a></li>
          <li><a href="#">asdasda</a></li>
        </ul>
      </div>
      
    </header>
  </body>
</html>

Answer 2

您应将click绑定到所有元素，并检查body是否具有类：

$('body *:not(.container)').click(function() {
    if($('body').hasClass('visible')){
      alert('clicked the outside');
      $('body').removeClass('visible');
      return false;
    }
});

单击全高元素以留出空白以添加类

2 个答案: