Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 24.03.2014, 22:56
Аспирант
Отправить личное сообщение для Hurray Посмотреть профиль Найти все сообщения от Hurray
 
Регистрация: 22.02.2012
Сообщений: 70

Разворачивающееся меню
Меню должно разворачиваться через полсекунды после наведения на него курсора, если курсор с него не убрали. Использую setTimeout. Если курсор убрали с меню, то делаем clearTimeout. Почему при отведении курсора Таймер не уничтожается? меню разворачивается, даже если курсор отвели.
$(".h_menu li").mouseenter(function(){
		var that = this;
		glt = setTimeout(function() { 
			var num=$(that).index();
			if (num>0) {
				$(".hpop_item").stop();
				$(".hpop").stop();

				num--;
				var $item=$(".hpop_item").eq(num);
				var he=$item.height();

				$(".hpop_item").stop(true,true).fadeOut(100);
				$(".hpop").stop().animate({height:he},300);
				$item.stop().fadeIn(300);
			}
			else {
				if($(".hpop_item").is(":visible")) {
					hpopclose();
				}
			}		
}, 500)
	});
// если убрать курсор с пункта меню, таймер уничтожается
  $(".h_menu li").onmouseout = function() {
    clearTimeout(glt); 
  }
Ответить с цитированием
  #2 (permalink)  
Старый 24.03.2014, 23:08
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,120

Hurray,
возможно вы на другом Li или если запустилась анимация то clearTimeout её неостановит
Ответить с цитированием
  #3 (permalink)  
Старый 25.03.2014, 10:33
Аспирант
Отправить личное сообщение для Hurray Посмотреть профиль Найти все сообщения от Hurray
 
Регистрация: 22.02.2012
Сообщений: 70

Сообщение от рони Посмотреть сообщение
Hurray,
возможно вы на другом Li или если запустилась анимация то clearTimeout её неостановит
Какие можете предложить альтернативные способы решения проблемы? Как можно с помощью условия if проверить, находится курсор на элементе или нет?
Ответить с цитированием
  #4 (permalink)  
Старый 25.03.2014, 11:02
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,120

Hurray,
макет нужен вашего меню
Ответить с цитированием
  #5 (permalink)  
Старый 25.03.2014, 21:37
Аспирант
Отправить личное сообщение для Hurray Посмотреть профиль Найти все сообщения от Hurray
 
Регистрация: 22.02.2012
Сообщений: 70

Сообщение от рони Посмотреть сообщение
Hurray,
макет нужен вашего меню
<nav class="h_menu">
				<ul>
					<li class="
h_menu-now">
						<div class="logo">
							<a href="/" title="Indian Ocean">
								<span>Indian<b>Ocean</b></span>
								<p>сайт туристической компании Dek Travel</p>
							</a>
						</div>
					</li>
					<li class="h_menu_i h_menu_i-1
"><a href="/seychelles/"><span>Сейшельские</span> острова</a></li>
					<li class="h_menu_i h_menu_i-2
"><a href="/mauritius/">остров <span>Маврикий</span></a></li>
					<li class="h_menu_i h_menu_i-3
"><a href="/maldives/">острова <span>Мальдивы</span></a></li>
					<li class="h_menu_i h_menu_i-4
"><a href="/сountrys/">другие <span>Страны</span></a></li>
				</ul>
			</nav>
<div style="height: 0px; overflow: hidden;" class="hpop list">
	<div style="display: none; opacity: 1;" class="hpop_item">
		Выпадающая вкладка 1
	</div>	
	<div style="display: none; opacity: 1;" class="hpop_item">
		Выпадающая вкладка 2		
	</div>
	<div style="display: none; opacity: 1;" class="hpop_item">
		Выпадающая вкладка 3		
	</div>	
	<div style="display: none; opacity: 1;" class="hpop_item">
		Выпадающая вкладка 4		
	</div>		
</div>

Последний раз редактировалось Hurray, 25.03.2014 в 21:48.
Ответить с цитированием
  #6 (permalink)  
Старый 25.03.2014, 22:48
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,120

Hurray, ошибка у вас в 25 строке = вместо ()
ну и как вариант
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <style type="text/css">
  .hpop_item{
    background-color: #FFA500;
    height: 100px
  }

  </style>
</head>

<body>
<nav class="h_menu">
				<ul>
					<li class="h_menu-now">
						<div class="logo">
							<a href="/" title="Indian Ocean">
								<span>Indian<b>Ocean</b></span>
								<p>сайт туристической компании Dek Travel</p>
							</a>
						</div>
					</li>
					<li class="h_menu_i h_menu_i-1
"><a href="/seychelles/"><span>Сейшельские</span> острова</a></li>
					<li class="h_menu_i h_menu_i-2
"><a href="/mauritius/">остров <span>Маврикий</span></a></li>
					<li class="h_menu_i h_menu_i-3
"><a href="/maldives/">острова <span>Мальдивы</span></a></li>
					<li class="h_menu_i h_menu_i-4
"><a href="/сountrys/">другие <span>Страны</span></a></li>
				</ul>
			</nav>
<div style="height: 0px; overflow: hidden;" class="hpop list">
	<div style="display: none; opacity: 1;" class="hpop_item">
		Выпадающая вкладка 1
	</div>
	<div style="display: none; opacity: 1;" class="hpop_item">
		Выпадающая вкладка 2
	</div>
	<div style="display: none; opacity: 1;" class="hpop_item">
		Выпадающая вкладка 3
	</div>
	<div style="display: none; opacity: 1;" class="hpop_item">
		Выпадающая вкладка 4
	</div>
</div>
<script>var glt;
    var $menu = $(".h_menu .h_menu_i")
    $menu.mouseenter(function(){
        var num = $menu.index(this);
		glt = setTimeout(function() {
				var $item=$(".hpop_item").eq(num);
				var he=$item.height();
				$(".hpop_item").stop(true,true).fadeOut(100);
				$(".hpop").stop().css({height:0}).animate({height:he},300);
				$item.stop().fadeIn(300);
}, 500)
	});
// если убрать курсор с пункта меню, таймер уничтожается
  $(".h_menu .h_menu_i").mouseleave(  function() {
    $(".hpop_item").stop(true,true).fadeOut(100);
    clearTimeout(glt);
  })

</script>
</body>

</html>

Последний раз редактировалось рони, 25.03.2014 в 22:59.
Ответить с цитированием
  #7 (permalink)  
Старый 26.03.2014, 10:36
Аспирант
Отправить личное сообщение для Hurray Посмотреть профиль Найти все сообщения от Hurray
 
Регистрация: 22.02.2012
Сообщений: 70

Спасибо огромное! Всё работает.
А как сделать, чтобы вкладка не сворачивалась, если курсор находится над нею, то есть если передвинули курсор с пункта меню на вкладку? Сворачиваться вкладка должна только в том случае, если курсор покинул и $(".h_menu .h_menu_i") и $(".hpop_item").
$(".h_menu .h_menu_i").mouseleave(  function() {
    $(".hpop_item").stop(true,true).fadeOut(100);
    clearTimeout(glt);
  })
Ответить с цитированием
  #8 (permalink)  
Старый 26.03.2014, 11:11
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,120

Hurray,
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <style type="text/css">
  .hpop_item{
    background-color: #FFA500;
    height: 100px
  }
  .h_menu_i{
       display: block;
       width:  25%;
       float: left;
  }

  </style>
</head>

<body>
<nav class="h_menu">
				<ul>
					<li class="h_menu-now">
						<div class="logo">
							<a href="/" title="Indian Ocean">
								<span>Indian<b>Ocean</b></span>
								<p>сайт туристической компании Dek Travel</p>
							</a>
						</div>
					</li>
					<li class="h_menu_i h_menu_i-1
"><a href="/seychelles/"><span>Сейшельские</span> острова</a></li>
					<li class="h_menu_i h_menu_i-2
"><a href="/mauritius/">остров <span>Маврикий</span></a></li>
					<li class="h_menu_i h_menu_i-3
"><a href="/maldives/">острова <span>Мальдивы</span></a></li>
					<li class="h_menu_i h_menu_i-4
"><a href="/сountrys/">другие <span>Страны</span></a></li>
				</ul>
            </nav>&nbsp;
<div style="height: 0px; overflow: hidden; " class="hpop list">
	<div style="display: none; opacity: 1;" class="hpop_item">
		Выпадающая вкладка 1
	</div>
	<div style="display: none; opacity: 1;" class="hpop_item">
		Выпадающая вкладка 2
	</div>
	<div style="display: none; opacity: 1;" class="hpop_item">
		Выпадающая вкладка 3
	</div>
	<div style="display: none; opacity: 1;" class="hpop_item">
		Выпадающая вкладка 4
	</div>
</div>
<script>
    var glt;
    var $menu = $(".h_menu .h_menu_i")
    $menu.mouseenter(function(){
        var num = $menu.index(this);
        clearTimeout(glt);
		glt = setTimeout(function() {
				var $item=$(".hpop_item").eq(num);
				var he=$item.height();
				$(".hpop_item").stop(true,true).fadeOut(100);
				$(".hpop").stop().css({height:0}).animate({height:he},300);
				$item.stop().fadeIn(300);
}, 500)
	});
  $(".hpop_item").mouseenter(function(){clearTimeout(glt)})
  $(".h_menu .h_menu_i, .hpop_item").mouseleave(  function() {
    clearTimeout(glt);
    glt = setTimeout(function() {
    $(".hpop_item").stop(true,true).fadeOut(100);},500)
  })
</script>
</body>

</html>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Выделение активных пунктов многоуровневого меню на jQuery Letto Элементы интерфейса 2 04.12.2013 15:30
Открыть слайд (раздел) текущего пункта меню Demath Элементы интерфейса 8 18.07.2012 02:49
скрипт работает только на последнем пункте меню walking Элементы интерфейса 0 08.01.2012 14:56
Выпадающие меню like2dev Общие вопросы Javascript 9 21.10.2011 14:09
Проблема с аккордионом и меню Tie ExtJS 3 01.09.2011 14:36