<div x-data="{ open: false }">
    <button @click="open = true">展開下拉選單</button>

    <ul
        x-show="open"
        @click.away="open = false"
    >
      <li>item1</li>
      <li>itme2</li>
    </ul>
</div>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/alpinejs/2.8.2/alpine.js