Javascript 我的<；span>；标签不起作用。元素是堆叠的，而不是跨出的

我在遵循一个名为@coursetro（AdobeXD，Vue，React，Angular）的网站上的教程，我正在尝试构建我的标题组件，当我运行程序时，我在标题组件中跨越的所有标题元素都会层叠在一起。我已经附加了我的HTML代码以及在vue.js中使用的sass和js im。我知道这很简单，但我已经花了两天的时间试图解决这个问题。（我正在使用：Balma，Sass）

家
特征
关于
常见问题

现在加入

导出默认值{
名称：“应用程序”
}
@导入“../node_modules/bulma/bulma.sass”
@导入“mq”

---

向你问好，我想你误解了。它是一个内联元素，正如这个人已经解释的那样

使用vue.js，您可以非常轻松地实现您的目标：

<span v-on:click="toggle= !toggle" class="nav-toggle">
    <div v-show="toggle"class="nav-container">
        <span></span>
        <span></span>
        <span></span>
     </div>
</span>

v-show

根据

toggle

变量的值决定是否显示div。

---

单击span时，

v-on:click=“toggle=！toggle”

切换

toggle

变量。您也可以将span放置在其他位置。

并不意味着“已扩展”-它是一个包含或分组其他元素的内联元素（我看到的主要用途是图标和文本）-请参阅MDN:。调查这一点的一个好方法是消除所有其他技术，并获得一个仅使用HTML和纯CSS的确认结构。通过这种方式，您将学习基础知识，还可以获得干净的代码作为代码片段发布在这里，这样我们都可以帮助您。现在我们看不到CSS应用于的或任何其他元素。在任何情况下，如果您参考一个外部教程，如果您可以链接到它，那就太好了。

<span v-on:click="toggle= !toggle" class="nav-toggle">
    <div v-show="toggle"class="nav-container">
        <span></span>
        <span></span>
        <span></span>
     </div>
</span>