Раскрывающееся меню
Здравствуйте.
помогите решить делему есть меню <ul class="menu-sidebar"> <li class="level-1"> <i class="icon-plus"></i> <a class="level-1" href="/.../..."></a> <ul class="level-2 active"> <li class="level-2"></li> <li class="level-2"></li> </ul> </li> <li class="level-1"> <i class="icon-plus"></i> <a class="level-1" href="/.../..."></a> <ul class="level-2 active"> <li class="level-2"></li> <li class="level-2"></li> </ul> </li><li class="level-1"> <i class="icon-plus"></i> <a class="level-1" href="/.../..."></a> <ul class="level-2 active"> <li class="level-2"></li> <li class="level-2"></li> </ul> </li> </ul> необходимо что бы при нажатии именно на icon-plus происходило раскрытие списка, начал было делать так jQuery(document).ready(function($){ $(".menu-sidebar ul.level-2:first").addClass("active"); $(".menu-sidebar ul.level-2:not(:first)").hide(); $(".menu-sidebar .level-1 i").on("click", function() { $(this).slideToggle("slow") .siblings(".menu-sidebar ul.level-2:visible").slideUp("slow"); }); }); но ни как не получается обратиться к элементу ul.level-2 именно нужного родителя |
Fedul,
ваш номер 217 ... :lol: вы тока не паникуйте. |
информативно)))
|
открывашка для меню 217
Fedul,
и так открывашка для меню 217 предыдущие варианты смотреть в поиске по форуму рекомендую это http://javascript.ru/forum/project/3...na-jquery.html <!DOCTYPE HTML> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> .icon-plus { cursor: pointer; } </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script> $(function(){ var ul = $(".menu-sidebar ul.level-2"); ul.hide(); $(".menu-sidebar").on("click", ".icon-plus", function() { var sub = $(this).nextAll("ul") sub.slideToggle("slow") ul.not(sub).slideUp("slow"); }); ul.first().show() }); </script> </head> <body> <ul class="menu-sidebar"> <li class="level-1"> <i class="icon-plus">+</i> <a class="level-1" href="/.../..."></a> <ul class="level-2 active"> <li class="level-2">1</li> <li class="level-2">2</li> </ul> </li> <li class="level-1"> <i class="icon-plus">+</i> <a class="level-1" href="/.../..."></a> <ul class="level-2 active"> <li class="level-2">1</li> <li class="level-2">2</li> </ul> </li><li class="level-1"> <i class="icon-plus">+</i> <a class="level-1" href="/.../..."></a> <ul class="level-2 active"> <li class="level-2">1</li> <li class="level-2">2</li> </ul> </li> </ul> </body> </html> |
понял, исправлюсь)
по теме, спасибо! отлично работает. |
Часовой пояс GMT +3, время: 14:46. |