0

Есть скрипт открытия меню и закрытия нужно что бы через 10 секунд блок закрылся но только если мышка за пределами блока, а если мышка на блоке то что бы он не закрывался

пробовал так но не выходит:

  $(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>

1
  • у вас в js в пятой строке лишнее });
    – tCode
    10 дек 2016 в 21:38

1 ответ 1

1

Делается это по такому принципу

$(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>

7
  • с моим примером не работает
    – BedOmar
    11 дек 2016 в 15:57
  • у меня меню которое сразу открыто. нужно что бы после 10сек блок закрылся но ели мышка не наведена на блок если наведена, то закрывать не надо
    – BedOmar
    11 дек 2016 в 17:06
  • @BedOmar, всё равно не понимаю, почему не подходит
    – Yuri
    11 дек 2016 в 17:26
  • потому что не работает в моем случае
    – BedOmar
    11 дек 2016 в 17:52
  • скрипт закрытия начинает работать когда я забираю мышку с option а у мне нужно что бы скрипт активировался сразу когда загрузится страница
    – BedOmar
    11 дек 2016 в 18:05

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.