jquery实现下拉菜单的手风琴效果

前端之家收集整理的这篇文章主要介绍了jquery实现下拉菜单的手风琴效果前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文实例为大家分享了jquery实现下拉菜单手风琴展示的具体代码,供大家参考,具体内容如下

HTML代码

dion">
    • 机械电子
    • 生物工程
    • 能源环保
    • 化学化工
    • 陕西省
    • 江苏省
    • 山东省
    • 河南省
    • 50万~100万
    • 100万~200万
    • 200万~500万
    • 500万以上
    • 状态1
    • 状态2
    •   </ul>
      </li>
  • css代码

    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代码

    })

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

    原文链接:https://www.f2er.com/jquery/37645.html

    猜你在找的jQuery相关文章