本文實(shí)例為大家分享了jquery實(shí)現(xiàn)下拉菜單手風(fēng)琴展示的具體代碼，供大家參考，具體內(nèi)容如下

html代碼

<div class="site-nav">  <ul class="site-accordion">    <li>      <div class="tab-head">學(xué)科領(lǐng)域</div>      <ul class="tabs-list">        <li>機(jī)械電子</li>        <li>生物工程</li>        <li>能源環(huán)保</li>        <li>化學(xué)化工</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)費(fèi)范圍</div>      <ul class="tabs-list">        <li>50萬(wàn)~100萬(wàn)</li>        <li>100萬(wàn)~200萬(wàn)</li>        <li>200萬(wàn)~500萬(wàn)</li>        <li>500萬(wàn)以上</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');        })

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持錯(cuò)新站長(zhǎng)站。