There is a script for opening the menu and closing it is necessary that after 10 seconds the block is closed, but only if the mouse is outside the block, and if the mouse is on the block so that it does not close

I tried it but it does not work:

$(document).ready(function(){ $("#closea").click(); $("#closediv").fadeIn(); }); $(function() { $("#closea").click(function() { if ($(this).hasClass("closea")) { $(this).removeClass("closea"); $("#closeimg").attr("src", "../img/up.png"); var k=0; $(".close").mouseover(function(){k=1;}); if(k==1){ setTimeout(function(){ $("#closea").addClass("closea"); $("#closeimg").attr("src", "../img/down.png"); $("#closediv").slideToggle("slow"); },5000); }else{ k=0; } } else { $(this).addClass("closea"); $("#closeimg").attr("src", "../img/down.png"); } $("#closediv").slideToggle("slow"); }); }); 
 <div class='close'> <div id='closediv'> контент в блоке </div> <a id='closea' onclick="close(this)" class="closea"> <img id='closeimg' src="../img/up.png" style="width:30px"> </a> </div>

  • you have extra js in the fifth line }); - tCode

1 answer 1

This is done on this principle

 $(function() { var timeout; $('.menu').click(function() { $(this).find('.options').css('display', 'block'); }); $('.menu').mouseover(function() { clearInterval(timeout); }); $('.menu').mouseout(function() { var e = this; timeout = setTimeout(function() { $(e).find('.options').css('display', 'none'); }, 10000); }); $('.menu').each(function() { var e = this; timeout = setTimeout(function() { $(e).find('.options').css('display', 'none'); }, 10000); }); }); 
 body {font-family: arial} .menu { display: block; position: relative; cursor: pointer; } .menu .select { display: block; width:200px; padding: 5px; border: 1px solid black; } .menu .options { display: block; position: absolute; top: calc(100% - 1px); width:200px; padding: 5px; border: 1px solid black; } .menu .options .option:hover { background-color:black; color: white; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="menu"> <div class="select">Пункт 1</div> <div class="options" style="display:block;"> <div class="option">Пункт 1</div> <div class="option">Пункт 2</div> <div class="option">Пункт 3</div> </div> </div>

  • it doesn't work with my example - BedOmar
  • I have a menu that is immediately open. it is necessary that after 10 seconds the block is closed but if the mouse is not pointed at the block if it is pointed , then it is not necessary to close it - BedOmar
  • @BedOmar, I still don’t understand why it’s not suitable - Yuri
  • because it does not work in my case - BedOmar
  • the closing script starts working when I pick up the mouse with option and I need it to activate the script right away when the page loads - BedOmar