首頁  >  文章  >  web前端  >  jquery實現下拉式選單的手風琴效果分享

jquery實現下拉式選單的手風琴效果分享

小云云
小云云原創
2017-12-31 16:15:021341瀏覽

本文主要為大家詳細介紹了jquery實現下拉菜單的手風琴效果,具有一定的參考價值,有興趣的小伙伴們可以參考一下,希望能幫助到大家。

本文實例為大家分享了jquery實作下拉選單手風琴展示的具體程式碼,供大家參考,具體內容如下

html程式碼


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

      </ul>
    </li>

  </ul>
</p>

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: &#39;&#39;;
  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程式碼


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

        })

相關推薦:

#簡單實作jQuery手風琴效果方法分享

純CSS實作手風琴效果範例詳解

jquery手風琴焦點動畫

以上是jquery實現下拉式選單的手風琴效果分享的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn