DIV CSS 佈局教程網

本文實例為大家分享了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');

        })

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持。