Переключение видимости ul ul
структура меню
<ul class="main-menu"> <li class="active"> <a class="selected" href="">Леса</a> <ul class="main-menu"> <li><a href="">Леса клиновые</a></li> <li><a href="">Леса рамные</a></li> <li><a href="">Леса хомутовые и штыревые</a></li> </ul> </li> <li><a href="">Вышки-тур</a> <ul class="main-menu"> <li><a href="">Вышки-тур резервуарные</a></li> </ul> </li> </ul> сейчас 2 уровень вложенности скрыт вот так: .main-menu li ul {display:none;} .main-menu li:hover ul {display:block;} Хочу сделать так чтобы видимостью управлял именно jq. Только функция не ховер. А по другому. При наведение на какой либо <li> внутри которого есть второй уровень - этот второй уровень становился видимый. и если мышку в сторону отвести то он не закрывался бы. А лишь только тогда бы закрывался когда курсор перейдет на другой <li> у которого есть вложенный <ul> |
Открывашка 215 для соседних Li в меню
ufaclub,
<!DOCTYPE HTML> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> .main-menu > li > ul {display:none;} .main-menu > li.active > ul {display:block;} </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script> $(function(){ var li = $(".main-menu").parent('li'); li.mouseenter(function() { li.not(this).removeClass("active"); $(this).addClass("active"); }); }); </script> </head> <body> <ul class="main-menu"> <li class="active"> <a class="selected" href="">Леса</a> <ul class="main-menu"> <li><a href="">Леса клиновые</a></li> <li><a href="">Леса рамные</a></li> <li><a href="">Леса хомутовые и штыревые</a></li> </ul> </li> <li><a href="">Вышки-тур</a> <ul class="main-menu"> <li><a href="">Вышки-тур резервуарные</a></li> </ul> </li> </ul> </body> </html> |
спасибо!
|
Часовой пояс GMT +3, время: 01:40. |