国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > JavaScript > 正文

jquery實現下拉菜單的手風琴效果

2019-11-19 16:00:44
字體:
來源:轉載
供稿:網友

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

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

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 大英县| 绍兴市| 封丘县| 沂水县| 来凤县| 冀州市| 福泉市| 阳春市| 新乐市| 子洲县| 雷山县| 墨江| 乐清市| 荔浦县| 阿克陶县| 商丘市| 旺苍县| 秀山| 工布江达县| 吉首市| 江孜县| 台江县| 漯河市| 阿拉尔市| 灵山县| 增城市| 海南省| 六枝特区| 米易县| 江津市| 思茅市| 米林县| 九寨沟县| 宣武区| 土默特左旗| 若尔盖县| 财经| 锦州市| 固镇县| 谢通门县| 读书|