使用jquery怎么實現(xiàn)一個手風琴下拉菜單效果

使用jquery怎么實現(xiàn)一個手風琴下拉菜單效果？相信很多沒有經(jīng)驗的人對此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個問題。

html代碼

<div class="site-nav">
 <ul class="site-accordion">
  <li>
   <div class="tab-head">學科領域</div>
   <ul class="tabs-list">
    <li>機械電子</li>
    <li>生物工程</li>
    <li>能源環(huán)保</li>
    <li>化學化工</li>
   </ul>
  </li>
  <li>
   <div class="tab-head">省份地區(qū)</div>
   <ul class="tabs-list">
    <li>陜西省</li>
    <li>江蘇省</li>
    <li>山東省</li>
    <li>河南省</li>
   </ul>
  </li>
  <li>
   <div class="tab-head">經(jīng)費范圍</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">需求狀態(tài)</div>
   <ul class="tabs-list">
    <li>狀態(tài)1</li>
    <li>狀態(tài)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');

    })

看完上述內(nèi)容，你們掌握使用jquery怎么實現(xiàn)一個手風琴下拉菜單效果的方法了嗎？如果還想學到更多技能或想了解更多相關內(nèi)容，歡迎關注億速云行業(yè)資訊頻道，感謝各位的閱讀！