JQuery Accordion 是一款非常流行的 Javascript 庫,它可以制作出一種華麗的折疊菜單效果。這篇文章將簡要介紹如何使用 JQuery Accordion。
首先,你需要在頁面中加入 Jquery 和 Jquery UI 的庫。在 HTML 文檔的 head 標簽中加入以下代碼:
<head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <link rel="stylesheet" > </head>
接著,在頁面中創建一個 div 元素,將其作為 accordion 的容器。你可以通過 class 或 id 屬性給這個 div 元素賦予樣式或自定義動畫效果。例如:
<div class="accordion"> <h3>第一個標題</h3> <div> <p>第一個內容</p> </div> <h3>第二個標題</h3> <div> <p>第二個內容</p> </div> <h3>第三個標題</h3> <div> <p>第三個內容</p> </div> </div>
可以看到,每個標題和對應的內容都包含在一個自己的 div 標簽中。這是 accordion 的結構必須這樣設計。
最后,在 JavaScript 中加入以下代碼:
$(function() { $(".accordion").accordion(); });
這樣就完成了 accordion 的基本設置。你可以通過修改 CSS 樣式、HTML 結構和 JavaScript 中的配置選項,來自定義 accordion 的樣式、動畫效果和行為。
上一篇mysql兩個表查詢慢
下一篇如何新建css中類樣式