系统城装机大师 - 固镇县祥瑞电脑科技销售部宣传站！

组装电脑|监控安装|打印机 |投影机 |数据库 |CMS教程 |服务器设置 |网页制作 |网络编程 | 脚本专栏 |重装教程 | 如何安装系统？ |
网站导航

系统下载

Win10系统 Win8系统 Win7系统 WinXP系统 路由器

软件下载

电脑软件 安卓软件 安卓应用 安卓游戏

文章资讯

IT资讯 系统教程 软件教程 U盘教程 系统帮助

系统相关

系统主题 Win10激活工具 Win8激活工具 Win7激活工具

专题合集

软件合集 教程专题 安卓推荐
电脑配置
配置清单 品牌机 组装机 一体机 笔记本
软件
  • 软件
  • 文章
  • 安卓
搜 索

热搜：番茄花园 电脑公司 萝卜家园 深度技术 雨林木风

首页 XP系统 Win7系统 Win10系统 win11系统 在线装机 U盘启动 系统教程 IT资讯
Win8系统 Linux系统 Server系统 U PE教程 重装大师 装机精灵 网络知识 bios设置 电脑配置
当前位置：首页 > 网络编程 > JavaScript > 详细页面

jquery实现垂直手风琴菜单

时间：2020-03-04来源：电脑系统城作者：电脑系统城

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

1、HTML部分


 
  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4. <meta charset="UTF-8">
  5. <title>垂直手风琴菜单</title>
  6. <link rel="stylesheet" type="text/css" href="css/style.css" >
  7. </head>
  8. <body>
  9. <ul class="container">
  10. <li><img src="images/user.png" class="icon">
  11. <span>Account</span>
  12. </li>
  13. <ul class="submenu">
  14. <div class="expand-triangle"></div>
  15. <li><span>Basic</span></li>
  16. <li><span>Picture</span></li>
  17. <li><span>Go Premium</span></li>
  18. </ul>
  19.  
  20. <li><img src="images/envelope.png" class="icon">
  21. <span>Messages</span>
  22. </li>
  23. <ul class="submenu">
  24. <div class="expand-triangle"></div>
  25. <li><span>New</span></li>
  26. <li><span>Sent</span></li>
  27. <li><span>Trash</span></li>
  28. </ul>
  29. <li><img src="images/cog.png" class="icon">
  30. <span>Settings</span>
  31. </li>
  32. <ul class="submenu">
  33. <div class="expand-triangle"></div>
  34. <li><span>Language</span></li>
  35. <li><span>Password</span></li>
  36. <li><span>Payments</span></li>
  37. </ul>
  38. </ul>
  39. <script src="js/jquery-2.1.1.min.js"></script>
  40. <script src="js/main.js"></script>
  41. </body>
  42. </html>

2、CSS部分​


 
  1. body{
  2. padding:0;
  3. margin:0;
  4. }
  5. ul{
  6. list-style:none;
  7. width:276px;
  8. }
  9. li{
  10. cursor:pointer;
  11. }
  12. .container{
  13. margin:100px auto;
  14. font-size:16px;
  15. position:relative;
  16. padding:0;
  17. }
  18. .container >li{
  19. background-color: #e4644b;
  20. border-top: 1px solid #d05942;
  21. padding:0 0 0 40px;
  22. height:48px;
  23. color:#f7f1e3;
  24. box-sizing: border-box;
  25. position: relative;
  26. }
  27. .container > li:first-child {
  28. border-radius: 7px 7px 0 0;
  29. border-top: 0;
  30. }
  31. .container > li:last-child {
  32. border-radius:0 0 7px 7px;
  33. }
  34. .container >li .icon{
  35. width:20px;
  36. height:20px;
  37. float:left;
  38. left:10px;
  39. top:15px;
  40. position:absolute;
  41. display:block;
  42. }
  43. .container >li span{
  44. line-height:48px;
  45. display:block;
  46. }
  47. .submenu{
  48. display:block;
  49. box-sizing: border-box;
  50. color: #ae9f9f;
  51. font-size: 13px;
  52. content: " ";
  53. }
  54. .expand-triangle{
  55. background: url(../images/expand.gif) top left no-repeat;
  56. height: 10px;
  57. width: 276px;
  58. content: " ";
  59. margin-left: -40px;
  60. }
  61. .submenu li {
  62. line-height: 20px;
  63. height: 35px;
  64. padding-top: 11px;
  65. margin-left: -40px;
  66. background-color: #484141;
  67. border-left: solid 6px #484141;
  68. transition: border-left 220ms ease-in;
  69. }
  70. .submenu li span {
  71. margin-left: 30px;
  72. }
  73. .submenu .chosen,
  74. .submenu .chosen:hover {
  75. border-left: solid 6px #96d145;
  76. }
  77. .submenu li:hover {
  78. border-left: solid 6px #d05942;
  79. }​

3、JS部分


 
  1. $(document).ready( function() {
  2. var $submenu = $('.submenu');
  3. var $mainmenu = $('.container');
  4. $submenu.hide();
  5. $submenu.first().delay(400).slideDown(700);
  6. $submenu.on('click','li', function() {
  7. $submenu.siblings().find('li').removeClass('chosen');
  8. $(this).addClass('chosen');
  9. });
  10. $mainmenu.on('click', 'li', function() {
  11. $(this).next('.submenu').slideToggle().siblings('.submenu').slideUp();
  12. });
  13. });

4、效果图

jquery实现垂直手风琴菜单

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

分享到：

相关信息

如何使用正则表达式保留部分内容的替换功能
gulp-font-spider实现中文字体包压缩实践
ChatGPT在前端领域的初步探索

热门系统总排行

装机必备

系统教程栏目

系统帮助 win12教程 监控安装 祥瑞电脑 重装大师 重装教程 bios 其它教程 软件教程 苹果MAC教程 Linux教程 Win2003教程 Win2008教程 U盘教程 WinXP教程 Win7教程 Win8教程 Win10教程 win11教程 打印机

栏目热门教程

人气教程排行

站长推荐

热门系统下载

软件发布| Tag标签| 版权声明| 网站地图| 软件专题| sitemap| 系统城一键重装系统QQ群

本站发布的系统与软件仅为个人学习测试使用，请在下载后24小时内删除，不得用于任何商业用途，否则后果自负，请支持购买微软正版软件！如侵犯到您的权益,请及时通知我们,我们会及时处理。

皖ICP备11004271号-6版权所有：固镇县祥瑞电脑科技销售部