侧边栏动画效果问题

Question

左侧侧边栏当点击顶部的按钮之后应该是可折叠的，但是我按照老师的步骤弄完之后其他的动态效果都有，唯独这个按钮不管用，请问其他人有这个问题吗？

Answer 1

qq_深蓝_2 2017-06-19 14:29:30

我也遇到这个问题，后来一个群友帮助解决了，在header.component.html中，大概14行的位置

<a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">

加粗的位置，改成offcanvas就可以了，具体原因不详。。。那位群友说，他因为经常写Bootstrap，所以这么测试了一下，然后就成功了。。。

• 小布依然 #1

  感谢 解决了

• 彷徨1942 #2

  谢谢，已解决，我的 bootstrap 版本是3.3.7 ，也是出现了这个问题。确实是改成offcanvas 就OK了！

Answer 2

Willman4217423 2017-07-18 10:08:48

//我来终结这个问题！！！看了源码，提供两种解决方式！ 

第一种：

我在node_modules里的admin-lte的app.js里仔细查找了关于这个按钮的所有属性，都没找到，然后去了github查看了最新的代码， 人家文件名都换了，不叫app.js了，改成AdminLTE.js了， 然后里面是有[data-toggle=push-menu]获取这个元素，当然绑定了相关方法。我最简单的方式就是把这个文件copy过来，放在和app,js同级目录，引用，页面上效果毫无悬念就出来了。


<a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">


第二种：

像被采纳答案说的，把data-toggle="push-menu"改成data-toggle="offcanvas"。解释下原因，这个东西跟bootstrap没有任何关系，这是admin-lte的一个坑。app.js的第313行开始是关于这个动画效果的js操作，下面是它的完整注释：

/* PushMenu()
 * ==========
 * Adds the push menu functionality to the sidebar.
 *
 * @type Function
 * @usage: $.AdminLTE.pushMenu("[data-toggle='offcanvas']")  // 注意这里元素的获取
 */

我们npm下载的admin-lte里的app.js文件并没有给data-toggle="push-menu"这个按钮加任何操作， 实际人家是要给data-toggle="offcanvas"加左边栏这个效果。

总结下， 我觉得坑是在， admin-lte官方更新了自己网站的代码，但是npm上的并没有更新，所以才导致了这个问题。

第一种解决方案的缺点是，你不能更新admin-lte这个包了。

第二种解决方式的缺点是，当admin-lte官方更新了包后， 你本地必须把已经改成offcanvas的按钮给改回push-menu， 因为官网最新的就是push-menu。

// 更新

最简单的方式，还是更新下admin-lte版本，安装的时候指定最新版本: npm install admin-lte#2.4.0

码了不少字，花了点时间的，兄弟们动动手指点个赞吧

• adamtang #1

  楼上正解

• Mydream_come_true #2

  谢谢兄弟，帮了我大忙，很好的解释，已关注你！

Answer 3

恶汉模式 2017-07-09 23:52:34

版本问题，npm下载是2.3.11，而官网是2.4.0，用2.4.0解决侧边栏无法点击问题

Answer 4

彷徨1942 2017-07-17 16:58:30

<a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">加粗的位置，改成offcanvas就可以了，目前还没有找出原因，希望给出 “为什么”。

• Willman4217423 #1

  看我回答

Answer 5

慕码人4364028 2017-07-16 11:39:50

data-toggle="offcanvas",确实是改了这个就好使了，是不是版本的问题，我也是刚跟着做的，我的版本是"version": "2.3.11"

Answer 6

双影1644227351 2017-06-19 08:31:30

同样问题

Answer 7

JoJo 2017-05-24 11:29:45

别的效果都有，只有这个没有么？这不科学啊...所有的效果都是在一个js文件里的啊...

• 提问者 bfbygfg #1

  是的老师…换了另一个js文件就可以了，看了源代码感觉应该没问题的，不知道是不是环境的问题。我在另一个相同问题里写了临时解决方案，您有空可以看一下