翻遍互联网都找不到的解决方案，教你实现Gitbook默认折叠效果(4)

初始化测试项目$ gitbook init
启动测试项目$ gitbook serve
虽然一片空白,并没有什么实质性内容,但是大道至简,对于我们复现并测试问题来说,足够了!

打开 Chrome 浏览器并按下 F12 开启调试模式,鼠标选中左侧的 Elements 元素选项卡并点亮左侧的小鼠标,然后在页面上找到左侧图标按钮,于是选中元素高亮了.

稍微熟悉前端的小伙伴可能很轻松就能明白 a 标签的 class 属性表示的含义,见名知意,可以这么解释:
btn 应该是控制外观的样式,表现得像是按钮效果.pull-left 应该是控制元素的位置,拉倒左边.js-toolbar-action 应该是控制元素的行为,js 工具栏行为动作.由此可见,点击该图标实现左侧菜单折叠/展开效果应该是 .js-toolbar-action 在起作用,也就是说某一段 js 肯定是针对该 class 进行了监听!
此时,点击右侧的 Event Listeners 选项卡查看该元素已监听的 click 事件,定位到是哪一个具体的 js 文件在起作用.