Svelte 中的原生 JavaScript

Question

我一直在遵循折叠侧边栏的指南。 我意识到我不能使用$因为它是在 Svelte 中保留的。 有人可以指导我如何进行这项工作吗？ 谢谢 ：）

$(document).ready(function () {
    $('#sidebarCollapse').on('click', function () {
        $('#sidebar').toggleClass('active');
    });
});

Answer 1

你真的应该通读/跟随Svelte 教程，它可能会帮助你更好地理解如何克服这样的小挑战。

切换一个类就像切换一个变量并使用 Svelte 的速记类指令一样简单

<script>
    let active = false;
</script>

<button on:click={()=> active = !active}>
    Some menu text or an icon here
</button>

<aside class:active>
    I'm a sidebar
</aside>

然后，您只需使样式与您正在遵循的任何教程相同，因为此时将有条件地应用活动类。

这是一个简单的REPL示例。

Answer 2

等效的香草 js 代码将是：

const sidebarCollapse = document.getElementById('sidebarCollapse');
const sidebar = document.getElementById('sidebar');

sidebarCollapse.onclick = () => sidebar.classList.toggle('active');