系統城裝機大師 - 唯一官網：www.farandoo.com！

打印機 |投影機 |數據庫 |CMS教程 |服務器設置 |網頁制作 |網絡編程 | 腳本專欄 |重裝教程 | 如何安裝系統？ |
網站導航

系統下載

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

軟件下載

電腦軟件 安卓軟件 安卓應用 安卓游戲

文章資訊

IT資訊 系統教程 軟件教程 U盤教程 系統幫助

系統相關

系統主題 Win10激活工具 Win8激活工具 Win7激活工具

專題合集

軟件合集 教程專題 安卓推薦
電腦配置
配置清單 品牌機 組裝機 一體機 筆記本
軟件
  • 軟件
  • 文章
  • 安卓
搜 索

熱搜：番茄花園 電腦公司 蘿卜家園 深度技術 雨林木風

首頁 XP系統 Win7系統 Win10系統 win11系統 在線裝機 U盤啟動 系統教程 IT資訊
Win8系統 Linux系統 Server系統 MacOS系統 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實現垂直手風琴菜單

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持我們。

分享到：

相關信息

Vue3 響應式偵聽與計算的實現
詳解mybatis-plus配置找不到Mapper接口路徑的坑
SpringBoot下使用MyBatis-Puls代碼生成器的方法

熱門系統總排行

裝機必備

系統教程欄目

Win10教程 重裝大師 重裝教程 bios 其它教程 系統幫助 蘋果MAC教程 Linux教程 Win2003教程 Win2008教程 U盤教程 WinXP教程 Win7教程 Win8教程 軟件教程 win11教程 打印機

欄目熱門教程

人氣教程排行

站長推薦

熱門系統下載

軟件發布| Tag標簽| 版權聲明| 網站地圖| 軟件專題| sitemap| 系統城一鍵重裝系統QQ群

本站發布的系統與軟件僅為個人學習測試使用，請在下載后24小時內刪除，不得用于任何商業用途，否則后果自負，請支持購買微軟正版軟件！如侵犯到您的權益,請及時通知我們,我們會及時處理。

皖ICP備11004271號-6版權所有：固鎮縣祥瑞電腦科技銷售部

jlzzjlzz亚洲乱熟在线播放