Форум

tot_kotoryi · #1 (**permalink**) 08.02.2016, 22:40

Здравствуйте, недавно начал изучать javascript с Jquery, сделал меню и 2 скрытых блока и хочу что бы при наведении на ссылку появлялся нужный блок, но почему то он начинает вести себя не так как мне нужно, скрывается и появляется не успев даже навести курсор на блок. Помогите понять как сделать так что бы при наведении на ссылку появлялся блок и не пропадал когда курсор пропадает с ссылки, а при наведении на другую ссылку, появлялся другой блок и пропадал предыдущий блок, не помогает даже задержка. И как сделать компактный код что бы не писать на каждую кнопку новую функцию. Спасибо.

<div class="mn_1" style="display:none;"> block 1</div>
<div class="mn_2" style="display:none;"> block 2</div>	
	<ul>
		<li class="m_1"><a href="#">Menu 1</a></li>
		<li class="m_2"><a href="#">menu 2</a></li>
	</ul>

$(function(){
	$('.m_1').hover(function(){
	  $('.mn_1').show(1000);
	   },
	   function(){
		$('.mn_1').hide(1000);
		  });
});
$(function(){
	$('.m_2').hover(function(){
	  $('.mn_2').show(1000);
		},
	   function(){
		 $('.mn_2').hide(1000);
		   });
});

рони · #2 (**permalink**) 08.02.2016, 23:15

tot_kotoryi,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script>
   $(function(){
$(".m").mouseenter(function() {
   var  i = $(".m").index(this);
   $(".mn").stop().not($(".mn").eq(i).show()).hide()
})
   })
  </script>
</head>

<body>

<div class="mn" style="display:none;"> block 1</div>
<div class="mn" style="display:none;"> block 2</div>
	<ul>
		<li class="m"><a href="#">Menu 1</a></li>
		<li class="m"><a href="#">menu 2</a></li>
	</ul>




</body>

</html>

Форум

Справочник

Discord чат

Курсы javascript