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

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

html代码

<div class="site-nav">
 <ul class="site-accordion">
  <li>
   <div class="tab-head">学科领域</div>
   <ul class="tabs-list">
    <li>机械电子</li>
    <li>生物工程</li>
    <li>能源环保</li>
    <li>化学化工</li>
   </ul>
  </li>
  <li>
   <div class="tab-head">省份地区</div>
   <ul class="tabs-list">
    <li>陕西省</li>
    <li>江苏省</li>
    <li>山东省</li>
    <li>河南省</li>
   </ul>
  </li>
  <li>
   <div class="tab-head">经费范围</div>
   <ul class="tabs-list">
    <li>50万~100万</li>
    <li>100万~200万</li>
    <li>200万~500万</li>
    <li>500万以上</li>
   </ul>
  </li>
  <li>
   <div class="tab-head">需求状态</div>
   <ul class="tabs-list">
    <li>状态1</li>
    <li>状态2</li>

   </ul>
  </li>

 </ul>
</div>

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: 5px solid #4F5160;
 border-color: #4F5160 transparent transparent transparent;
 margin-top: 20px;
 position: relative;
 top: 10px;
 left: 5px;
}
.site-accordion>li .tabs-list{
 display: none;
}
.site-accordion>li .tabs-list li{
 width: 160px;
 height: 40px;
 line-height: 40px;
 text-align: center;
 color: #9c9c9c;
.site-accordion>li .tabs-list li:hover{
 background: #f2f2f2;
}

jQuery代码

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

    })

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

# jquery # 下拉菜单 # 手风琴 # jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单 # jQuery制作效果超棒的手风琴折叠菜单 # 基于Jquery代码实现手风琴菜单 # jQuery多级手风琴菜单实例讲解 # 基于jQuery实现以手风琴方式展开和折叠导航菜单 # 基于JQuery的一句话搞定手风琴菜单 # jquery实现简单手风琴菜单效果实例 # 基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果 # Jquery 垂直多级手风琴菜单附源码下载 # jQuery插件实现手风琴二级菜单 # 陕西省 # 河南省 # 山东省 # 江苏省 # 大家分享 # 具体内容 # 大家多多 # 机械电子 # 化学化工 # slideToggle # function # tab # head # tabs # list # margin # css # js # click # class

返回目录在线咨询

上一篇：实现 Go 语言中的类型无关通道：泛型数据传输实践
下一篇：厦门模板建站：个性化定制与高效营销平台解决方案

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

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

您的项目需求