时间戳

首页 > 解决方案 > 如何同步多个 UIKit 手风琴

javascript - 如何同步多个 UIKit 手风琴

问题描述

我在表格行内动态渲染 UIKit 手风琴，每个手风琴只包含一个子 ( li) 元素。如何同步这些手风琴，以便当其中一个打开时，其他手风琴折叠起来？就像选项一样multiple: false。这是一个 Vue 应用程序（如果您可以提供更具体的答案）。

标签： javascriptvue.jsuikitgetuikit

解决方案

这个答案更好，性能更高

i是循环的索引。
prevAccordionIndex在 Vue 实例数据中定义并初始设置为 null。它用于保存上一个（最后一个）打开的手风琴的索引，因此无需$refs像以前的答案那样循环查找打开的手风琴。

所有手风琴最初都折叠（关闭）。 

methods: {
    handleAccordionShow(index) {
        if (this.prevAccordionIndex !== null) {
            this.$uikit.accordion(this.$refs.categoryAccordion[this.prevAccordionIndex]).toggle(0, false)
            this.prevAccordionIndex = index
        } else {
            this.prevAccordionIndex = index
        }
    },
    handleAccordionHide(index) {
        this.prevAccordionIndex = this.prevAccordionIndex === index ? null : index
    }
}
<ul ref="categoryAccordion" @beforeshow="handleAccordionShow(i)" @beforehide="handleAccordionHide(i)" uk-accordion>
  <li>...</li>
</ul>

推荐阅读