javascript - alpine JS 手风琴内部的轻弹问题 - 我如何调整大小?
问题描述
所以我有一个带有 Alpine JS 的手风琴,其中一个手风琴里面有一个轻弹滑块。问题是,当手风琴展开时,滑块不显示。如果你调整浏览器的大小(通过拉伸它)甚至 1px,那么滑块就会出现。所以我的问题是,当单击按钮时,如何在面板上触发调整大小?我的代码如下。非常感谢您的宝贵时间。
<div>
<button
class="relative flex justify-between w-full mb-1 text-left group"
x-description="Expand/collapse question button"
@click="openPanel = (openPanel === 2 ? null : 2)"
x-bind:aria-expanded="openPanel === 2"
x-on:click="flkty.resize()"
>
<h2 class="mb-3 font-serif text-2xl lg:text-3xl " >The Team</h2>
<i
class="absolute text-gray-500 transform rotate-0 fas fa-chevron-right right-2 top-1"
x-state:on="Open" x-state:off="Closed" x-bind:class="{ 'rotate-90 text-green': openPanel === 2, 'rotate-0': !(openPanel === 2) }"
>
</i>
</button>
<div>
<div
class="relative transition-all duration-700"
x-show="openPanel === 2"
>
<div class="-mx-2 md:-mx-3 lg:-mx-4">
<div class="z-10 layout_block" data-flickity='{ "cellAlign": "left", "contain": true, "wrapAround": false, "prevNextButtons": false, "pageDots": false }'>
CONTENT OF ACCORDION HERE
</div>
</div>
</div>
<hr class="my-3">
</div>
</div>
解决方案
推荐阅读
- python-3.x - 将多个转换应用于 PCollection :: Error WriteToBigQuery
- .net - 在 .NET Web API(非核心)上使用 AutoMapper
- javascript - 如何使用 Javascript 关闭带有关闭按钮的超级菜单?
- php - php if else 程序,使用第一个“if”语句并忽略其余部分
- symfony - Symfony 4.3 - 无法自动装配引用类“Symfony\Component\Security\Core\Security”的服务参数
- c# - .NET WEB API2 从 JSON 输出中的子类中检索字段
- php - Laravel 5.8 - 未发送验证和欢迎电子邮件
- python - Robotarium 示例代码中的 ModuleNotFoundError
- javascript - 我如何让 kahootbot 多次加入?
- python - Python中是否有相当于R的save.image()函数?