jQuery手風(fēng)琴是一種常見的動(dòng)態(tài)效果，可以輕松實(shí)現(xiàn)展開和關(guān)閉效果，讓用戶更加方便地瀏覽網(wǎng)頁內(nèi)容。下面簡(jiǎn)單介紹一下如何使用jQuery手風(fēng)琴來實(shí)現(xiàn)這種效果。
<html>
<head>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" />
<script src="https://cdn.bootcdn.net/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
<div id="accordion">
<h3>第一節(jié)</h3>
<div>
<p>這是第一節(jié)內(nèi)容。</p>
</div>
<h3>第二節(jié)</h3>
<div>
<p>這是第二節(jié)內(nèi)容。</p>
</div>
<h3>第三節(jié)</h3>
<div>
<p>這是第三節(jié)內(nèi)容。</p>
</div>
</div>
<script>
$(function() {
$("#accordion").accordion();
});
</script>
</body>
</html>首先要引入jQuery庫和jQuery UI庫的文件，這里我們可以使用在線CDN。然后我們需要在頁面中定義一個(gè)div元素，設(shè)置其id為"accordion"，然后在該元素內(nèi)部添加多個(gè)h3和div標(biāo)簽，每個(gè)h3標(biāo)簽表示一個(gè)section，div標(biāo)簽中的內(nèi)容表示該section的具體內(nèi)容。
最后，我們使用jQuery的accordion()方法來實(shí)現(xiàn)手風(fēng)琴效果。該方法會(huì)自動(dòng)將div元素轉(zhuǎn)換成手風(fēng)琴，這樣用戶就可以通過點(diǎn)擊h3標(biāo)簽來展開或關(guān)閉相應(yīng)的div內(nèi)容。
上一篇jquery 打印
下一篇jquery 打開 編輯