用苗條隱藏和顯示元素的簡單方法

Question

我想有一種簡單的方法來隱藏和顯示帶有苗條按鈕的元素，我該怎么做？ 在香草JS中也更簡單嗎？

Answer 1

此代碼對我有用，它是 Svelte 提供的示例的修改版本，可在此處找到

<script>
    let visible = true;

    function toggleVissible() {
        visible = !visible
    }
</script>

<button on:click={toggleVissible}>
    Hide
</button>

{#if visible}
    <p>
        This text will hide.
    </p>
{/if}

Answer 2

Svelte 有{#if}指令，它可以綁定到本地 state，而后者又可以通過按鈕的on:click進行更改。

在 vanilla JS 中是否更容易取決於很多因素，包括整體復雜性。 從長遠來看，使用 Svelte 會使事情變得更容易。

我建議做教程...

Answer 3

香草

這是在 vanilla JS 中執行此操作的一種方法。

您可以直接將其放置在.astro組件中：

<button>Toggle</button>

<p>Content</p>

<script>
    document.querySelector('button').onclick = () => {
        const el = document.querySelector('p')
        el.style.display = el.style.display === 'none' ? 'block' : 'none'
    }
</script>

---

苗條

這是一個用 svelte 做的例子：

<script>
  let toggle = true
</script>

<button on:click={() => (toggle = !toggle)}> Toggle </button>

{#if toggle}
  <p>Content</p>
{/if}

確保使用client:指令導入它，以使 JS 在 astro 中實際發送到客戶端：

---
import Svelte from "./svelte.svelte";
---

<Svelte client:load />

---

選擇哪一個？

我建議使用 svelte，因為它更具可讀性，並且當您計划在未來添加更多功能時，您還具有更好的可擴展性。