保持第一个菜单项在jquery中扩展
我有3个用HTML设计的菜单项。 我希望我的第一个菜单项默认展开。
这是我的小提琴： FIDDLE
张贴我的任何东西：
HTML
JQuery的
$(document).ready(function () { $('#menu1 li a').click(function () { $(this).parent().children('ul').slideToggle('medium').toggleClass('collapsed').toggleClass('expanded'); //$(this).parent('ul').slideToggle('medium').toggleClass('collapsed').toggleClass('expanded'); $(this).parent().children('div').slideToggle('medium').toggleClass('collapsed').toggleClass('expanded'); }); });
样式
body { font: 10pt Arial, Helvetica, Sans-serif; background-image: url(); margin: 0px; } a { text-decoration: none; } #example1, #example2, #example3, #example4, #example5 { float: left; } .expand_all, .collapse_all { cursor: pointer; } .example_menu { font-size: 95%; list-style: none; margin: 0; padding: 0; vertical-align: top; width: 100%; } .example_menu ul { display: none; list-style: none; margin: 0; padding: 0; } #menu1, #menu2, #menu3, #menu4, #menu5 { margin: 0; color: #96C; } #menu1 li, #menu2 li, #menu3 li, #menu4 li, #menu5 li, .example_menu li { background-image: none; margin: 0; padding: 0; } .example_menu ul ul { display: block; } .example_menu ul ul li a { padding-left: 20px; width: 99%; } .example_menu li.header3 a { padding-left: 34px; width: 98%; } .example_menu a { color: #000; cursor: pointer; display: block; font-weight: bold; margin-left: 0; width: 99%; padding-top: 18px; padding-right: 0px; padding-bottom: 12px; padding-left: 19px; } .example_menu a.expanded { background: #bbb url('images/collapse.gif') no-repeat 3px 61%; } .example_menu a.collapsed { border-top: 1px solid #E3E3E3; background-color: #bbb; background-image: url(images/expand.gif); background-repeat: no-repeat; background-position: 3px 61%; } a.collapsed + ul { display: none; } .example_menu a.normal { background: none repeat scroll 0 0 #BBBBBB; } .example_menu a:hover { text-decoration: none; } .example_menu ul a { background: #e8e8e8; border-top: 2px solid #fff; color: #000; display: block; font-weight: normal; padding: 3px 8px 2px 17px; width: 98%; } .example_menu ul a:link { font-weight: bolder; } .example_menu ul a:hover { background: #f5f5f5; text-decoration: underline; } .example_menu li.active a { background: #fff; } .example_menu li.active li a { background: #e8e8e8; } #menu1 li.footer, #menu2 li.footer, #menu3 li.footer, #menu4 li.footer, #menu5 li.footer, .example_menu .footer { background: transparent url('images/footer.jpg') no-repeat 0 0; border-top: 2px solid #fff; height: 9px; line-height: 15px; margin: 0 0 10px 0; width: 95%; } .example_menu .footer span { display: none; }
一切都按预期工作，但我希望默认情况下扩展第一个菜单项。 请温柔，我是JQuery的新手。
演示小提琴
你可以简单地添加CSS：
.example_menu li:first-of-type ul{ display:block; }