首页 > 解决方案 > 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>

标签: javascriptalpine.jsflickity

解决方案


推荐阅读