Hello! There are two blocks - the second appears when you click on the first one and should disappear when you click on any area other than your own.

My script does not work correctly - the drop-down block appears and disappears immediately ... I understand that there must be a certain sequence, since Both functions are performed simultaneously, but I don’t know how to set it. Please help

Plus, I don’t understand why when clicking on a .header block .header appearing block blinks as it were. In theory, it should get opacity: 1 , and then its value should immediately change to 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>

    2 answers 2

     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>

      Your event - click on .header pops up to the body , which is why the block immediately hides. Prevent ascent using 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>

      • Your option does not work. The task of the author is to remove the drop-down box, if you click anywhere. - DimenSi
      • If you mean that the block does not close by clicking on the white area - then there is nothing there, all the elements are absolutely positioned and the height of the body 0 pixels. In reality, this will not happen. - br3t