資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
服裝學
法學如何使用 jQuery UI 啟用手風琴？
手風琴是一個可摺疊的 UI 元件，用於使網頁更具視覺吸引力。手風琴具有一些部分和子部分，這些部分代表可摺疊的部分。在每個元素中，都有一個標題，單擊該標題會顯示另一個部分，其中包含有關該標題的更多詳細資訊。
這還允許一次只打開一個標題。
一些用於啟用手風琴的有用方法
銷燬：用於銷燬手風琴。
停用：用於停用手風琴。
啟用：用於啟用手風琴。
以下示例中使用的一些有用事件
啟用：手風琴啟用後觸發。此函式獲取兩個引數：UI 和事件。
啟用前：手風琴啟用前觸發。此函式也獲取兩個引數：UI 和事件
建立：建立手風琴時觸發。此函式也獲取兩個引數：UI 和事件
方法 1：使用 .accordion() 方法
在此方法中，我們將對父容器元素使用此方法來建立手風琴。jQuery UI 提供了一個內建的手風琴小部件，可用於在 jQuery 中建立手風琴元件。
演算法
步驟 1：建立一個包含容器和標題的基本 HTML 檔案。使用帶有 id 的<div>作為容器。使用標題標籤和<P>標籤建立標題並編寫相關文字。
步驟 2：在 HTML 文件的 head 部分新增所需的 jQuery 匯入。
步驟 3：透過在<script>標籤內選擇父 div 元素來呼叫 .accordion() 方法。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JQuery UI Accordion</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js"></script>
<script>
$( function() {
$( "#accordion" ).accordion();
});
</script>
</head>
<body>
<h2>Tutorials Point Accordion</h2>
<div id="accordion">
<h3>Programming Languages</h3>
<div>
<p>C</p>
<p>Python</p>
<p>Frontend</p>
<p>C++</p>
</div>
<h3>Fruits</h3>
<div>
<p>Apple</p>
<p>Banana</p>
<p>Mango</p>
</div>
<h3>Vehicles</h3>
<div>
<p>Car</p>
<p>Bike</p>
<p>Truck</p>
</div>
</div>
</body>
</html>
使用 .accordion() 方法建立了基本的手風琴，當單擊後面的標題時，它會自動關閉第一個標題的內容。
方法 2：使用 ready() 函式
另一種方法是將 .accordion() 方法與 ready() 函式一起使用。Javascript 中的 ready() 函式用於在 DOM 完全呈現後執行特定程式。
一些可選引數已傳遞到 .accordion() 方法中，它們是
活動：此可選引數將活動/開啟的手風琴設定為給定的索引號。預設為 0，即第一個索引。您也可以將其設定為 false 以將手風琴的狀態設定為關閉。
動畫：此可選引數設定手風琴開啟/關閉時的動畫，它獲取數字/布林值。數字定義持續時間（毫秒），而布林值 false 將停用所有型別的動畫。
演算法
步驟 1：建立 HTML 檔案，在元素內建立標題和文字，在<head>標籤內匯入所需的 jQuery UI 指令碼。
步驟 2：在 script 標籤內，使用 .accordion() 方法和 ready() 函式啟用手風琴。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JQuery UI Accordion</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
$('#accordion').accordion({
active: 1,
animate: 200
});
});
</script>
</head>
<body style="text-align: center;">
<h1>Tutorials Point Accordion</h1>
<h2>Javascript Web Development</h2>
<div id="accordion">
<h4>Frontend</h4>
<div>
<p>ReactJS</p>
<p>NextJS</p>
<p>Angular JS</p>
</div>
<h4>Backend</h4>
<div>
<p>Node.js </p>
<p>Express.js</p>
</div>
<h4>Mobile Development</h4>
<p>React Native</p>
</div>
</body>
</html>
方法 3：使用 data-accordion 屬性
另一種使用 jQuery UI 啟用手風琴的方法是使用 data-accordion 屬性以及 .ready() 函式和 .accordion() 方法。在此示例中，傳遞了 heightStyle 引數，該引數用於設定手風琴和每個面板的高度。這接受字串值，例如“auto”、“fill”和“content”。預設為“auto”。
演算法
步驟 1：建立一個 div 元素並給出一個合適的 id 名稱。還使用<header>標籤建立手風琴的標題部分以及 data-accordion 屬性，其預設“活動”狀態為 false。
步驟 2：現在在<script>標籤內新增 accordion() 方法以及 ready() 函式。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JQuery UI Accordion</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
$('#accordion').accordion({
header: "> h3",
heightStyle: "content",
});
});
</script>
</head>
<body style="text-align: center;">
<h1>Tutorials Point Accordion</h1>
<h2>Programming Languages</h2>
<div id="accordion" style="text-align: center;">
<h3 data-accordion="{'active': false}">OOPS</h3>
<div>
<p data-accordion="{'heightStyle': 'content'}">Java</p>
<p data-accordion="{'heightStyle': 'content'}">Python</p>
<p data-accordion="{'heightStyle': 'content'}">C++</p>
</div>
<h3 data-accordion="{'active': false}">Game Development</h3>
<div>
<p data-accordion="{'heightStyle': 'content'}">Java</p>
<p data-accordion="{'heightStyle': 'content'}">C#</p>
</div>
<h3 data-accordion="{'active': false}">Mobile Development</h3>
<div>
<p data-accordion="{'heightStyle': 'content'}">Objective C</p>
<p data-accordion="{'heightStyle': 'content'}">Kotlin</p>
<p data-accordion="{'heightStyle': 'content'}">React Native</p>
</div>
</div>
</body>
</html>
結論
建議在複雜的 HTML 檔案中使用 .accordion() 方法和 .ready() 函式，因為頁面載入完成後才會啟用手風琴。您可以隨時使用以上任何方法，並使用 accordion() 的 CSS 樣式和選項、方法和事件來設定樣式和自定義手風琴。
583 次瀏覽
