Add a plus/minus sign to a jQuery menu
我为一个简单的菜单开发了以下代码:
1 2 3 4 5 6 7 8 9 10 11 12 | $(document).ready(function () { $(".main_menu_01, .main_menu_02").on('click', function () { var $panel = $(this).next('.panel'); if ($panel.is(':visible')) { $panel.add($panel.find('.panel')).slideUp(500).removeClass('active'); } else { $panel.slideDown(500).addClass('active'); } }); }); |
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 | .panel{ width: 100%; padding-left: 0%; font-weight: bold; overflow: hidden; display:none; } .main_menu_01 { padding-left: 1%; background: blue; } .main_menu_02 { padding-left: 5%; background: lime; } .sub_menu_01{ padding-left: 1%; background: lime; } .sub_menu_02{ padding-left: 10%; background: lime; } .main_menu_01:before, .main_menu_02:before { content:'+'; width:20px; display:inline-block; } .main_menu_01.active:before, .main_menu_02.active:before { content:'-'; } |
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 | <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> <li class="main_menu_01"> 1.0 Main Menu </li> <ul class="panel"> \t\t\t\t\t\t\t\t <li class="sub_menu_01"> 1.1 Sub Menu </li> \t\t\t\t\t <li class="main_menu_02"> 1.2 Sub Menu </li> <ul class="panel"> \t\t <li class="sub_menu_02"> 1.2.1 Sub Menu </li> <li class="sub_menu_02"> 1.2.2 Sub Menu </li> \t </ul> \t \t\t\t </ul> |
到目前为止,所有这些都运行良好。您还可以在此处的 JSFiddle 中找到代码。
如您所见,我想根据菜单是否打开为
我不确定这个问题是否是由
您知道我需要在代码中更改哪些内容,以便我可以使用
您需要在横幅上设置
1 2 3 4 5 6 7 8 9 10 11 12 | $(document).ready(function () { $(".main_menu_01, .main_menu_02").on('click', function () { var $panel = $(this).next('.panel'); if ($panel.is(':visible')) { $panel.add($panel.find('.panel')).slideUp(500); $(this).hasClass('main_menu_01') ? $('.menu').removeClass('active') : $(this).removeClass('active'); } else { $panel.slideDown(500); $(this).addClass('active'); } }); }); |
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 | .panel{ width: 100%; padding-left: 0%; font-weight: bold; overflow: hidden; display:none; } .main_menu_01 { padding-left: 1%; background: blue; } .main_menu_02 { padding-left: 5%; background: lime; } .sub_menu_01{ padding-left: 1%; background: lime; } .sub_menu_02{ padding-left: 10%; background: lime; } .main_menu_01:before, .main_menu_02:before { content:'+'; width:20px; display:inline-block; } .main_menu_01.active:before, .main_menu_02.active:before { content:'-'; } |
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 | <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> <li class="menu main_menu_01"> 1.0 Main Menu </li> <ul class="panel"> \t\t\t\t\t\t\t\t <li class="sub_menu_01"> 1.1 Sub Menu </li> \t\t\t\t\t <li class="menu main_menu_02"> 1.2 Sub Menu </li> <ul class="panel"> <li class="sub_menu_02"> 1.2.1 Sub Menu </li> <li class="sub_menu_02"> 1.2.2 Sub Menu </li> \t </ul> \t </ul> |