jquery實現(xiàn)下拉菜單的手風(fēng)琴效果

更新時間：2017年07月23日 15:56:45 作者：lelewang123

這篇文章主要為大家詳細介紹了jquery實現(xiàn)下拉菜單的手風(fēng)琴效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了jquery實現(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>機械電子</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)費范圍</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)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

詳解jQuery 鏈式調(diào)用
這篇文章主要介紹了jQuery 鏈式調(diào)用的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)使用jQuery，感興趣的朋友可以了解下
2021-05-05
解決jquery的datepicker的本地化以及Today問題
解決jquery的datepicker的本地化以及Today問題,需要的朋友可以參考下
2012-05-05
分享十五個最佳jQuery 幻燈插件和教程
在網(wǎng)站前端中使用jQuery庫已經(jīng)變得越來越流行，前端開發(fā)人員發(fā)布或撰寫的相關(guān)的插件和教程也與日俱增。
2010-03-03
jQuery使用$.ajax進行異步刷新的方法(附demo下載)
這篇文章主要介紹了jQuery使用$.ajax進行異步刷新的方法,涉及jQuery實現(xiàn)ajax異步刷新實現(xiàn)數(shù)據(jù)交互的相關(guān)技巧,并提供了完整示例demo供讀者下載參考,需要的朋友可以參考下
2015-12-12
jQuery的插件列表(2010-1-25更新)
jQuery 是我最喜歡的一個Javascript框架，下文中包含了眾多��以為jQuery愛好者們使用的插件。如果你還知道其他的好東西，歡迎與大家分享。
2011-08-08
jquery jqPlot API 中文使用教程(非常強大的圖表工具)
這里貢獻上中文教程，基本上所有的api都很齊全，供有需要的童鞋們瞧瞧，更重要的是作為自己滴收藏
2011-08-08
解決攔截器對ajax請求的攔截實例詳解
這篇文章主要介紹了解決攔截器對ajax請求的攔截實例詳解的相關(guān)資料,需要的朋友可以參考下
2016-12-12
jquery+css實現(xiàn)移動端元素拖動排序
這篇文章主要為大家詳細介紹了jquery+css實現(xiàn)移動端元素拖動排序，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-02-02
使用jquery提交form表單并自定義action的方法
下面小編就為大家?guī)硪黄褂胘query提交form表單并自定義action的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-05-05
jQuery插件PageSlide實現(xiàn)左右側(cè)欄導(dǎo)航菜單
jQuery pageSlide 是一個可以讓網(wǎng)頁出現(xiàn)滾動效果的jQuery插件，它可以控制一個隱藏頁面的顯示和關(guān)閉。具體來說，就是當(dāng)前頁占一個完整頁面，隱藏頁是看不到的，你設(shè)置一個控制的地方，點擊該控制時觸發(fā)事件，隱藏的頁面就滑出來，再次點擊隱藏頁面以外的地方，它就又關(guān)閉
2015-04-04