本文介绍了保持第一个菜单项在jquery中展开的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有3个菜单项目设计在HTML。
我希望我的第一个菜单项默认扩展。
I have 3 menu Items designed in HTML.I want my first Menu item to be expanded by default.
这里是我的小提琴:
Here is my Fiddle: FIDDLE
发布我与我共享的内容:
Posting whatever I have with me :
<div id="example1">
<ul id="menu1" class="example_menu">
<li><a class="expanded" href="#">Program 111</a>
<ul>
<li><a href="#">258275h</a>
</li>
<li><a href="#">264007</a>
</li>
<li><a href="#">270650b</a>
</li>
</ul>
</li>
<li><a class="collapsed" href="#">Program 112</a>
<ul>
<li><a class="collapsed" href="#">25875d</a>
</li>
<ul>
<li><a href="#">Release 1- Early Upgrade - 1404</a>
</li>
<li><a href="#">Release 2 - MDPP Umbrella Insurance</a>
</li>
</ul>
<li><a class="collapsed" href="#">269162a</a>
<ul>
<li><a href="#">Release 1- Early Upgrade - 1404</a>
</li>
<li><a href="#">Release 2 - MDPP Umbrella Insurance</a>
</li>
</ul>
</li>
</ul>
</li>
<li><a class="collapsed" href="#">Program 113</a>
<div>Hello</div>
<ul>
<li><a href="#">245875f</a>
</li>
<li><a href="#">2587940</a>
</li>
<li><a href="#">201254d</a>
</li>
</ul>
</li>
</ul>
</div>
$(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的新手。
Everything is working as expected, But I want the first menu item to be expanded by default.Please be gentle, I am new to JQuery.
推荐答案
您只需添加CSS:
Demo Fiddle
You can simply add the CSS:
.example_menu li:first-of-type ul{
display:block;
}
这篇关于保持第一个菜单项在jquery中展开的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!