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

Question

我将 Jekyll 用于托管在 GitHub (yndajas.co) 上的静态站点，并且我正在尝试使菜单在小 screens/windows.[=12= 上可折叠]

我尝试了很多不同的方法，包括相当普通的 Bootstrap 代码，但每次菜单都无法保持打开状态。目前有两种不同的可折叠菜单和第三种在现场网站上不会折叠。在小屏幕上，您 click/press 中任一菜单按钮的动画在交替 clicks/presses 时似乎略有不同（展开与折叠，消失之前），这让我觉得菜单在 [= 之间切换21=] 状态，但它在任何一种状态下都不会最终显示为打开状态。知道为什么它不起作用吗？我想知道它是否在 static/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 网站上实现可折叠菜单

How to implement collapsible menus on Jekyll site

html

github

jekyll

twitter-bootstrap

bootstrap-4