微客导航 » 文章资讯 » jquery实现下拉菜单的手风琴效果

jquery实现下拉菜单的手风琴效果

2023-09-27 17:59:05 312

本文实例为大家分享了jquery实现下拉菜单手风琴展示的具体代码，供大家参考，具体内容如下

html代码




学科领域

机械电子

生物工程

能源环保

化学化工

省份地区

陕西省

江苏省

山东省

河南省

经费范围

50万~100万

100万~200万

200万~500万

500万以上

需求状态

状态1

状态2

css代码

.site-accordion>li{
margin-top:13px;
}
.site-accordion>li.tab-head{
width:160px;
height:40px;
line-height:40px;
text-align:center;
color:#9c9c9c;
font-size:16px;
background:#f2f2f2;
}
.site-accordion>li.tab-head:hover{
background:#292d48;
}
.site-accordion>li.tab-head:after{
content:'';
border:5pxsolid#4F5160;
border-color:#4F5160transparenttransparenttransparent;
margin-top:20px;
position:relative;
top:10px;
left:5px;
}
.site-accordion>li.tabs-list{
display:none;
}
.site-accordion>li.tabs-listli{
width:160px;
height:40px;
line-height:40px;
text-align:center;
color:#9c9c9c;
.site-accordion>li.tabs-listli:hover{
background:#f2f2f2;
}

jQuery代码

$('.tab-head').click(function(){
$(this).next().slideToggle();
$('.tab-head').css('background','#FFFFFF');
$(this).css('background','#292d48');

})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

jquery实现下拉菜单的手风琴效果

热门推荐

随机推荐