在本教程中，我们将使用Alpine.js来构建手风琴组件。众所周知的手风琴或可折叠面板通过单击标题来隐藏和显示大量内容。请注意，为了保持此教程高山的关注，我使用了尾风CSS框架，但可以很容易地将其转换为普通CSS。
让我们开始创建一个新的HTML文件，并通过CDN加载Alpine和Tailwind：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Alpine.js Accordion</title>
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet" />
<script src="https://unpkg.com/alpinejs" defer></script>
</head>
<body>
</body>
</html>
现在，对于存储在数组中的手风琴数据，如下所示：
<script>
document.addEventListener('alpine:init', () => {
Alpine.data('accordion', () => ({
data: [
{
id: '1',
heading: 'What is Alpine.js?',
content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis pharetra dui, ac feugiat metus. Vivamus id pellentesque urna, quis hendrerit tortor. Sed pharetra sapien a metus fringilla varius.',
isOpen: false,
},
{
id: '2',
heading: 'Is Alpine.js better than jQuery?',
content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis pharetra dui, ac feugiat metus. Vivamus id pellentesque urna, quis hendrerit tortor. Sed pharetra sapien a metus fringilla varius.',
isOpen: false,
},
{
id: '3',
heading: 'Who created Alpine.js?',
content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis pharetra dui, ac feugiat metus. Vivamus id pellentesque urna, quis hendrerit tortor. Sed pharetra sapien a metus fringilla varius.',
isOpen: false,
},
]
}))
});
</script>
这里的eventListener正在等待高山在创建数据对象之前加载。
接下来我们可以从手风琴组件本身开始：
<div x-data="accordion" class="p-3"></div>
高山中的组件始终具有x-data指令，该指令将HTML的一部分定义为高山组件。它还为组件提供了反应性数据，在我们的情况下，在上一步中创建的accordion数据。
我们将使用<template>元素来持有HTML，因为它不会立即渲染：
<div x-data="accordion" class="p-3">
<template x-for="accordion in data" :key="accordion.id"></template>
</div>
Alpine的S x-for指令通过数据迭代以创建以下标记：
<div x-data="accordion" class="p-3">
<template x-for="accordion in data" :key="accordion.id">
<div class="accordion">
<button @click="data = data.map(i => ({ ...i, isOpen: i.id !== accordion.id ? false : !i.isOpen}))"
class="w-full flex justify-between items-center border-b py-3">
<h3 x-text="accordion.heading" class="font-bold"></h3>
</button>
<div x-text="accordion.content" x-show="accordion.isOpen" class="py-3"></div>
</div>
</template>
</div>
单击按钮时，isOpen值在true和false之间切换。 x-text指令获取手风琴内容，并将其显示在其居住的元素中。最终使用的高山是x-show，它控制可见性和元素，因此只有当accordion.isOpen等于true是可见的内容时。
最终添加一个图标以指示手风琴是打开还是关闭：
<div class="accordion">
<button @click="data = data.map(i => ({ ...i, isOpen: i.id !== accordion.id ? false : !i.isOpen}))"
class="w-full flex justify-between items-center border-b py-3">
<h3 x-text="accordion.heading" class="font-bold"></h3>
<span x-show="accordion.isOpen">-</span>
<span x-show="!accordion.isOpen">+</span>
</button>
<div x-text="accordion.content" x-show="accordion.isOpen" class="py-3"></div>
</div>
我们再次使用x-show来控制开放和封闭图标的可见性。
这是本教程的全部，您现在应该拥有一个由Alpine.js供电的手风琴组件。如果您喜欢本教程，您也可能对我们的其他Apline.js tutorials感兴趣。