AHA Stack を試したい(8) Alpine.js編
kenp前回のAlpine.jsのコードを元に、要素の範囲外をクリックした時にも非表示にするコードを試しました。
---
---
<html>
<head>
<style>
#foo {
border: 1px solid #000;
}
</style>
<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/collapse@3.x.x/dist/cdn.min.js"></script>
</head>
<body>
<!-- ... -->
<div x-data="{ expanded: false }">
<button @click="expanded = ! expanded">Toggle Content</button>
<p id="foo" x-show="expanded" x-collapse @click.outside="expanded = false">
Lorem ipsum
</p>
</div>
</body>
</html>追加したのはpタグに 「@click.outside="expanded = false"」を追加したことです。
このコードによりpタグの外側の要素をクリックした場合もpタグが非表示になります。
要素の外側を分かりやすくするためにpタグに border を付けています。
なお、collapseプラグインはコメントアウトを外しています。
まずは、「Toggle Content」をクリックしてpタグを表示状態にします。
次にpタグの外側をクリックします。
非表示となりました。
＼ 最新情報をチェック ／
