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

【问题标题】：How to implement collapsible menus on Jekyll site如何在 Jekyll 网站上实现可折叠菜单
【发布时间】：2019-07-02 06:05:46
【问题描述】：

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

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

文件都在这个存储库中：https://github.com/yndajas/yndajas.co

【问题讨论】：

标签： html twitter-bootstrap github bootstrap-4 jekyll

【解决方案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>

...

【讨论】：

哦，对我来说，第二个/中间导航栏也不会保持打开状态。我在 Android 和 Windows 上。您使用的是什么操作系统？
奇怪，现在它也不会对我开放。嗯...看了更多并更新了我的答案。基本上你使用的是旧版本的 Bootstrap，需要更新它。
谢谢！你成功了。