<div x-data="dropdown()">
    <button x-on:click="open">開啟</button>

    <div x-show="isOpen()" x-on:click.away="close">
      <div>下拉選單內容</div>
    </div>
</div>
function dropdown() {
        return {
            show: false,
            open() { this.show = true },
            close() { this.show = false },
            isOpen() { return this.show === true },
        }
}

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