laravel-livewire - alpine 如何在仅打开 1 个项目的情况下制作手风琴？

Question

在带有 livewire 1.3 和 alpine@v2.xx 的 laravel 7 中，我制作了一个手风琴，例如：

<div class="accordion_wrapper">

    @foreach($faqs as $nextFaq)
        <div class="accordion_{{ $nextFaq->id }}" x-data="{ is_opened: false }">
            <button @click="is_opened= !is_opened">
                <div>Question {{ $nextFaq->id }}</div>
            </button>
            <div class="accordion_content" x-show="is_opened">
                {{ $nextFaq->id }} Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
            </div>
        </div>
    @endforeach

</div>

它有效，但我怎样才能用 alpine 只打开 1 个项目？如果用户单击其他一些项目，则必须关闭其余项目。

Answer 1

尝试将打开的选项卡索引保存到x-data，而不是打开/关闭的布尔值，这样您就可以对手风琴项进行分组：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.9.6/tailwind.min.css" integrity="sha512-l7qZAq1JcXdHei6h2z8h8sMe3NbMrmowhOl+QkP3UhifPpCW2MC4M0i26Y8wYpbz1xD9t61MLT9L1N773dzlOA==" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/2.3.0/alpine.js"></script>

<div class="p-4">
  <div x-data="{ opened_tab: null }" class="flex flex-col">
    <div class="flex flex-col border rounded shadow mb-2">
      <div @click="opened_tab = opened_tab == 0 ? null : 0 " class="p-4 cursor-pointer">Accordion Label #1</div>
      <div x-show="opened_tab==0" class="px-4 pb-4">
        Accordion Contents #1
      </div>
    </div>
    <div class="flex flex-col border rounded shadow mb-2">
      <div @click="opened_tab = opened_tab == 1 ? null : 1 " class="p-4 cursor-pointer">Accordion Label #2</div>
      <div x-show="opened_tab==1" class="px-4 pb-4">
        Accordion Contents #2
      </div>
    </div>
    <div class="flex flex-col border rounded shadow mb-2">
      <div @click="opened_tab = opened_tab == 2 ? null : 2 " class="p-4 cursor-pointer">Accordion Label #3</div>
      <div x-show="opened_tab==2" class="px-4 pb-4">
        Accordion Contents #3
      </div>
    </div>
  </div>
</div>