tailwind-css - 在 Tailwind/Alpine.js 手风琴上切换课程
问题描述
我用 TailwindCSS 和 Alpine.js 创建了一个手风琴,它工作得很好,除了我还想更改按钮中的图标,当它被点击时展开内容。
这就是我所拥有的:
<div x-data="{selected:null,open:true}">
<dl class="faqs mx-auto max-w-2xl">
<dt>
<span class="faq-q">Question</span>
<button
type="button"
class="faq-toggle"
@click="selected !== 1 ? selected = 1 : selected = null, open = open"
:class="{ 'faq-open': open, 'faq-close': !(open) }"
>
<span>+</span>
<span class="hidden">-</span>
</button>
</dt>
<dd
class="faq-a overflow-hidden transition-all max-h-0 duration-700"
style="" x-ref="container1" x-bind:style="selected == 1 ? 'max-height: ' + $refs.container1.scrollHeight + 'px' : ''"
>
<div class="inner">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure rerum in tempore sit ducimus doloribus quod commodi eligendi ipsam porro non fugiat nisi eaque delectus harum aspernatur recusandae incidunt quasi.
</div>
</dd>
</dl>
</div>
和CodePen的链接。
我想要做的是在单击按钮时切换按钮的faq-open
类faq-close
。尽管我实际上可能也需要在父级上切换一个类dt
。
目前,当您单击按钮时,手风琴会展开,但类不会改变。
解决方案
问题出在这条线上
@click="selected !== 1 ? selected = 1 : selected = null, open = open"
您永远不会更改 的值open
,它始终是初始化时的值,即open: true
.
你需要切换它:
@click="selected !== 1 ? selected = 1 : selected = null, open = !open"
顺便说一句,您不需要额外的变量selected
来控制隐藏文本,只需一个open
变量就足够了。像这样的东西:
<div x-data="{open: true}">
<dl class="faqs mx-auto max-w-2xl">
<dt>
<span class="faq-q">Question</span>
<button
type="button"
class="faq-toggle"
@click="open = !open"
:class="open ? 'faq-open' : 'faq-close'"
>
<span :class="open ? '' : 'hidden'">+</span>
<span :class="open ? 'hidden' : ''">-</span>
</button>
</dt>
<dd
class="faq-a overflow-hidden transition-all max-h-0 duration-700"
style="" x-ref="container1" x-bind:style="open ? 'max-height: ' + $refs.container1.scrollHeight + 'px' : ''"
>
<div class="inner">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure rerum in tempore sit ducimus doloribus quod commodi eligendi ipsam porro non fugiat nisi eaque delectus harum aspernatur recusandae incidunt quasi.
</div>
</dd>
</dl>
推荐阅读
- node.js - SyntaxError: Unexpected token - 在 JSON 中的位置 0
- mysql - 在 Python 中参数化 DELETE SQL 语句时遇到问题
- reactjs - React Native Dimensions iOS Change 事件不会触发
- spring - 有没有办法在 spring 中找出自定义依赖的 application.properties 文件的属性名称?
- python - CSV 文件不会更新,直到脚本在连续追加文件时终止
- python - 如何使用自定义 geojson 文件来绘制带有 plotly 的库地图?
- python - 将 DataFrame 转换为 Dictionary 的函数
- ag-grid - 如何在ag-grid中删除隐藏字段从导出到excel
- asp.net-core - 有没有办法渲染位于另一个项目中的剃刀视图
- nix - nix-shell 无法更改语言环境警告