Question

我将Jekyll用于托管在GitHub（yndajas.co）上的静态站点，并且试图使菜单在小屏幕/窗口上可折叠。

我尝试了许多不同的方法，包括相当普通的Bootstrap代码，但是每次菜单都不会保持打开状态。当前，有两个不同的可折叠菜单，而第三个不会在实时站点上折叠。在小屏幕上，单击/按下任一菜单按钮时的动画似乎在交替单击/按下时（扩展与折叠，消失之前）略有不同，这让我认为菜单在打开/关闭状态之间进行切换，但是在两种状态下都不会显示为打开状态。知道为什么它不起作用吗？我想知道在静态/ Jekyll网站上是否不可能，但是我看到了可行的示例！

文件全部在此存储库中：https://github.com/yndajas/yndajas.co

Answer 1

我在本地建立了您的网站，而问题似乎出在Bootstrap上。您正在使用版本3.3.7，而文档正在使用4.3.1。如果您使用当前版本的Bootstrap，则中间的导航栏将起作用。您也可以删除第一个和第三个导航栏。

// bottom of /_layouts/default.html

...
<!-- JavaScript links placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

...

如何在Jekyll网站上实现可折叠菜单

1 个答案: