依照慣例先附一段程式碼吧~

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

    <div x-show="isOpen()" x-on:click.away="close">
        // Dropdown
    </div>
</div>

<script>
    function dropdown() {
        return {
            show: false,
            open() { this.show = true },
            close() { this.show = false },
            isOpen() { return this.show === true },
        }
    }
</script>

x-data="dropdown()" 進到這段程式會進到js的functio dropdown()去執行,
所以一進到這個function，便會回傳show為false(預設)，
當點選button時 x-on:click="open"這裡的open會帶進 open() { this.show = true }，
而下行 x-show="isOpen()"會進到isOpen() { return this.show === true }
因為點擊了上方的button，因此這邊會回傳true，
再回到x-show="isOpen()"中，意思等於x-show="isOpen()，所以就會顯現出來，
而x-on:click.away="close"同樣的也會進入close() { this.show = false },
這也就能有開開關的效果了喔!

這跟前幾天的範例很相似，有興趣的朋友可以比較一下，
只是這邊是放在js中去判斷的。