Jquery手风琴效果(无插件)

2013-03-06阅读(3116)评论(1)牵着狗狗看MM

苏州实时公交查询

CSS部分代码

[css]
body, input{
font-family: Calibri, Arial;
}
#accordion {
list-style: none;
padding: 0 0 0 0;
width: 170px;
}
#accordion li{
display: block;
background-color: #FF9927;
font-weight: bold;
margin: 1px;
cursor: pointer;
padding: 5 5 5 7px;
list-style: circle;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#accordion ul {
list-style: none;
padding: 0 0 0 0;
display: none;
}
#accordion ul li{
font-weight: normal;
cursor: auto;
background-color: #fff;
padding: 0 0 0 7px;
}
#accordion a {
text-decoration: none;
}
#accordion a:hover {
text-decoration: underline;
}
[/css]

HTML部分代码

[html]<ul id="accordion">
<li>Sports</li>
<ul>
<li><a href="#">Golf</a></li>
<li><a href="#">Cricket</a></li>
<li><a href="#">Football</a></li>
</ul>
<li>Technology</li>
<ul>
<li><a href="#">iPhone</a></li>
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
</ul>
<li>Latest</li>
<ul>
<li><a href="#">Obama</a></li>
<li><a href="#">Iran Election</a></li>
<li><a href="#">Health Care</a></li>
</ul>
</ul>
[/html]

JQUERY代码

[html]$("#accordion > li").click(function(){

if(false == $(this).next().is(‘:visible’)) {
$(‘#accordion > ul’).slideUp(300);
}
$(this).next().slideToggle(300);
});

$(‘#accordion > ul:eq(0)’).show();
[/html]

当然别忘记在头部加上引入JQUERY的代码

赞(0) 打赏
转载请注明来源:Web前端(W3Cways.com) - Web前端学习之路 » Jquery手风琴效果(无插件)
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏