Основной скрипт для раскрытия
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 |
<script> $(document).ready(function() { $('ul#my-menu li').each(function(i) { if($(this).find('ul').length>0) { $(this).addClass('parrent').append('<i class="el-submenu__icon-arrow el-icon-arrow-down el-icon-arrow-top"></i>'); } }) $('ul#my-menu li.active_element').closest('ul').addClass('active'); $('ul#my-menu li.active_element').parents('ul').addClass('active'); //http://loco.ru/materials/66-javascript-expanded-collapse-menu $('ul#my-menu>li>i, ul#my-menu>li>a').click(function(e) { // Attach an event listener // debugger; e.preventDefault(); var li=$(this).closest('li'); var href=$(this).closest('li').find('a:first').attr('href'); if(li.find('ul:first').length==0) { location.href=href; } if(li.find('ul:first').is(':visible')) { li.find('ul:first').hide(); li.removeClass('open'); }else{ li.find('ul:first').show(); li.addClass('open'); } // return false; // Prohibit the browser to follow the link address }); //http://loco.ru/materials/66-javascript-expanded-collapse-menu $('ul#my-menu>li>ul>li>i, ul#my-menu>li>ul>li>a').click(function(e) { // Attach an event listener // debugger; e.preventDefault(); var li=$(this).closest('li'); var href=$(this).closest('li').find('a:first').attr('href'); if(li.find('ul:first').length==0) { location.href=href; } if(li.find('ul:first').is(':visible')) { li.find('ul:first').hide(); li.removeClass('open'); }else{ li.find('ul:first').show(); li.addClass('open'); } }); /* //http://loco.ru/materials/66-javascript-expanded-collapse-menu $('ul#my-menu>li>i').click(function(e) { // Attach an event listener // debugger; var li=$(this).closest('li'); if(li.find('ul:first').is(':visible')) { li.find('ul:first').hide(); li.removeClass('open'); }else{ li.find('ul:first').show(); li.addClass('open'); } // return false; // Prohibit the browser to follow the link address }); //http://loco.ru/materials/66-javascript-expanded-collapse-menu $('ul#my-menu>li>ul>li>i').click(function() { // Attach an event listener var li=$(this).closest('li'); if(li.find('ul:first').is(':visible')) { li.find('ul:first').hide(); li.removeClass('open'); }else{ li.find('ul:first').show(); li.addClass('open'); } }); * */ }); </script> |
Далее что вам нужно
меню формата
ul id= my-menu
li
a +ul второго уровня
т.е меню у нас для 3х уровоней вложенности.
Для активных элементов заранее выставьте active_element- в li. (например при формировании в Php)
Если вам нужно, что бы меню раскрывалось исключительно по стрелочке- раскомментируйте код ниже.
