Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 08.01.2018, 16:31
Профессор
Отправить личное сообщение для Igorsrt Посмотреть профиль Найти все сообщения от Igorsrt
 
Регистрация: 21.02.2016
Сообщений: 271

Раскрывающееся вертикальное меню при наведении
Здравствуйте! Есть меню категорий, раскрывающееся по клику
Код:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML 5 complete</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<style>
ul.children{display: none;}
</style>
</head>
<body>
<ul class="product-categories">
  <li class="cat-parent"><a>Прочие игрушки</a>
    <ul class='children'>
      <li><a>Фигурки и персонажи</a></li>
      <li><a>Игры</a></li>
      <li><a>Конструкторы и головоломки</a></li>
      <li><a>Другие игрушки</a></li>
    </ul>
  </li>
  <li class="cat-parent"><a>Прочие товары</a>
    <ul class='children'>
    <li class="cat-item cat-item-19"><a>Мобили</a></li>
    </ul>
  </li>
</ul>
<script>
$(function() {
	$('.product-categories .cat-parent').children('a').click(function() {
    $(this).siblings('.children').slideToggle();
    return false;
  });
});
</script>
</body>
</html>
Нужно как-то переделать скрипт, что бы меню раскрывалось просто при наведении на родительский пункт.
Заранее спасибо!
Ответить с цитированием
  #2 (permalink)  
Старый 08.01.2018, 17:31
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,123

Igorsrt,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML 5 complete</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<style>
ul.children{display: none;}
</style>
</head>
<body>
<ul class="product-categories">
  <li class="cat-parent"><a>Прочие игрушки</a>
    <ul class='children'>
      <li><a>Фигурки и персонажи</a></li>
      <li><a>Игры</a></li>
      <li><a>Конструкторы и головоломки</a></li>
      <li><a>Другие игрушки</a></li>
    </ul>
  </li>
  <li class="cat-parent"><a>Прочие товары</a>
    <ul class='children'>
    <li class="cat-item cat-item-19"><a>Мобили</a></li>
    </ul>
  </li>
</ul>
<script>
$(function() {
  $('.product-categories .cat-parent').on("mouseleave", function() {
  $("ul", this).slideUp()
}).on("mouseenter" , ">a",function() {
    $(this).siblings('.children').slideDown();
    return false;
  });
});
</script>
</body>
</html>

Последний раз редактировалось рони, 08.01.2018 в 17:40.
Ответить с цитированием
  #3 (permalink)  
Старый 08.01.2018, 17:58
Профессор
Отправить личное сообщение для Igorsrt Посмотреть профиль Найти все сообщения от Igorsrt
 
Регистрация: 21.02.2016
Сообщений: 271

Спасибо, то что надо
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Сворачивание меню при клике в любом месте страницы DmitriyLan Элементы интерфейса 4 30.05.2017 16:18
задержка выпадания меню при наведении Maklerfox Элементы интерфейса 12 19.01.2017 16:30
Смена hover на click при скрытии меню Eliot456 jQuery 1 25.02.2016 22:05
Как реализовать задержку при наведении в меню? Stas-ik Элементы интерфейса 14 20.02.2014 12:21
Как сделать, чтобы при наведении на кнопку справа от нее появлялись текстовые ссылки? Tass Общие вопросы Javascript 7 17.02.2011 09:06