主页 / 问题 / 619026
Accepted
Игорь
Asked:2020-01-25 04:56:50 +0000 UTC2020-01-25 04:56:50 +0000 UTC

点击第三方区域返回原位

  • 772

你好！有两个块 - 当您单击第一个时第二个出现，当您单击您自己以外的任何区域时应该消失。

我的脚本无法正常工作 - 下拉框出现并立即消失......我知道必须有一定的顺序，因为 这两个功能同时执行，但我不知道如何设置它。请帮忙

另外，我不明白为什么当你点击一个方块时，.header出现的方块似乎会闪烁。理论上，它应该收到opacity: 1，然后它的值应该立即变为opacity: 0

$(function() {
  var searchformBlock = $('.menu');

  $('body').click(function() {
    if ($(searchformBlock).hasClass('active')) {
      $(searchformBlock).fadeOut().removeClass('active');
    }
  })

  $('.header').click(function () {
    $(searchformBlock).toggleClass('active');

    if ($(searchformBlock).hasClass('active')) {
      $(searchformBlock).fadeIn();
    } else {
      $(searchformBlock).fadeOut();
    }
  });
});
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  background-image: -webkit-linear-gradient(top, #fecf5e, #ffcc50);
  background-image: linear-gradient(to bottom, #fecf5e, #ffcc50);
  z-index: 101;
}
.menu {
  position: absolute;
  top: 60px;
  left: 0;
  right: 0;
  width: 300px;
  background: #a7a7a7;
  height: 30px;
  margin: 0 auto;
  z-index: 100;
  display: none;
  
  -moz-transition: all 0.4s cubic-bezier(0.2, 0.57, 0.36, 0.8);
  -o-transition: all 0.4s cubic-bezier(0.2, 0.57, 0.36, 0.8);
  -webkit-transition: all 0.4s cubic-bezier(0.2, 0.57, 0.36, 0.8);
  transition: all 0.4s cubic-bezier(0.2, 0.57, 0.36, 0.8);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header"></div>
<div class="menu"></div>

javascript

2 个回答

  1. Best Answer

    document.querySelector('.header').addEventListener('click', function () {
  var menu = document.querySelector('.menu');
  var handler;
  
  if (menu.hidden) {
    menu.hidden = false;
    
    menu.addEventListener('click', handler = function (event) {
      event.stopPropagation();
    }, true);
    
    document.addEventListener('click', function hide(event) {
      menu.hidden = true;
      menu.removeEventListener('click', handler, true);
      document.removeEventListener('click', hide, true);
    }, true);
  }
})
    [hidden] {
  display: none !important;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  background-image: -webkit-linear-gradient(top, #fecf5e, #ffcc50);
  background-image: linear-gradient(to bottom, #fecf5e, #ffcc50);
  z-index: 101;
}

.menu {
  position: absolute;
  top: 60px;
  left: 0;
  right: 0;
  width: 300px;
  background: #a7a7a7;
  height: 30px;
  margin: 0 auto;
  z-index: 100;
  
  animation: opacity-0-to-1 0.4s cubic-bezier(0.2, 0.57, 0.36, 0.8);
}

@keyframes opacity-0-to-1 {
  from { opacity: 0; }
  to   { opacity: 1; }
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header"></div>
<div class="menu" hidden="hidden"></div>

    • 2

  2. 您的点击事件冒泡.header到body，这会导致块立即隐藏。防止漂浮e.stopPropagation

    $(function() {
  var searchformBlock = $('.menu');

  $('body').click(function() {
    if (searchformBlock.hasClass('active')) {
      searchformBlock.fadeOut().removeClass('active');
    }
  })

  $('.header').click(function(e) {
    e.stopPropagation();
    searchformBlock.toggleClass('active');

    if (searchformBlock.hasClass('active')) {
      searchformBlock.fadeIn();
    } else {
      searchformBlock.fadeOut();
    }
  });

  searchformBlock.click(function(e) {
    e.stopPropagation();
  });
});
    .header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  background-image: -webkit-linear-gradient(top, #fecf5e, #ffcc50);
  background-image: linear-gradient(to bottom, #fecf5e, #ffcc50);
  z-index: 101;
}
.menu {
  position: absolute;
  top: 60px;
  left: 0;
  right: 0;
  width: 300px;
  background: #a7a7a7;
  height: 30px;
  margin: 0 auto;
  z-index: 100;
  display: none;
  -moz-transition: all 0.4s cubic-bezier(0.2, 0.57, 0.36, 0.8);
  -o-transition: all 0.4s cubic-bezier(0.2, 0.57, 0.36, 0.8);
  -webkit-transition: all 0.4s cubic-bezier(0.2, 0.57, 0.36, 0.8);
  transition: all 0.4s cubic-bezier(0.2, 0.57, 0.36, 0.8);
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header"></div>
<div class="menu"></div>

    • 1

相关问题