首先把下面這段程式碼丟到html裡面吧~

<div x-data="{ open: false }">
    <button @click="open = true">我是按鈕</button>
    
    <ul
        x-show="open"
        @click.away="open = false"
    >
        內容內容內容
    </ul>
</div>

最外面的div裡面x-data="{open:false}" 是必須要加的，
它會影響到內層的操作喔!
open是自己定義的名稱，預設是false;
button按鈕有click事件，意思是按下後open就會變成true;
ul裡面有x-show="open"，x-show顧名思義就是顯示出來，意思是後面的open若是true就會show了;
另外 @click.away="open = false" 特別要提click後的.away，
官方是寫

當 .away 修飾器存在時，事件處理程序只有在事件的起源為非其自身或其子項時才會被執行。
當使用者點擊下拉式選單與互動式視窗時，這對於隱藏它們是非常有用的。
總之就是如果不加，就只能執行一次而已喔。

這樣簡單的顯示影藏就完成啦~

動畫x-show.transition

通常顯示影藏都會搭配一些動畫才不會這麼暴力啦~
那麼以下這些語法大家就可以試著玩玩看了，
就把標籤裡的x-show改成下面的整另就可以做變化和客製化了。

指令 功能描述
x-show.transition
-同步淡出與縮放 (opacity, scale: 0.95, timing-function: cubic-bezier(0.4, 0.0, 0.2, 1), duration-in: 150ms, duration-out: 75ms)
x-show.transition.in
-只有「in」轉場。
x-show.transition.out
-只有「out」轉場。
x-show.transition.opacity
-只使用淡出。
x-show.transition.scale
-只使用縮放。
x-show.transition.scale.75
-自定 CSS 縮放transform: scale(.75) 。
x-show.transition.duration.200ms
-將「in」轉場設定為 200毫秒。「out」將設定為 in 的一半（100 毫秒）。
x-show.transition.origin.top.right
-自訂 CSS 轉場起始點transform-origin: top right.
x-show.transition.in.duration.200ms.out.duration.50ms
-替「in」與「out」設定不同的持續時間。

當然這些語法可以相互合併配合使用，就把它調成自己喜歡的樣子吧!

備註：x-show 將等待任何子轉場完成，如果你想繞過這個行為，請添加 .immediate 修飾器：

<div x-show.immediate="open">
    <div x-show.transition="open">
</div>