使用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怎么实现一个手风琴下拉菜单效果的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注创新互联网站建设公司行业资讯频道，感谢各位的阅读！

另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。