Bootstrap sidebar - Collapsed by default? (Metronic HTML template)
我正在使用引导程序边栏,并且希望在我的服务器交付网页时默认情况下折叠此边栏。目前的状态是正常的默认引导侧栏,该侧栏已扩展且未折叠。我将边栏代码放在下面。
我已经尝试过用jQuery切换引导程序侧栏的折叠状态,但是,使用此解决方案,用户会看到侧栏被切换了,这看起来不太好。只需执行以下行:
1 2 3 | $(document).ready(function() { $("#sidebar-menu-toggle").click(); }); |
此外,如果用户多次重新加载网站,则在页面加载后折叠边栏会很烦人。
到目前为止,这是我的侧边栏package器代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | <ul id="page-sidebar-menu-ul" class="page-sidebar-menu page-header-fixed page-sidebar-menu-light" data-keep-expanded="false" data-auto-scroll="true" data-slide-speed="200" style="padding-top: 40px"> <li class="sidebar-toggler-wrapper hide"> <span></span> </li> <li class="nav-item active"> My Menu <span class="selected"></span> </li> <li class="nav-item"> My Menu <span class="selected"></span> </li> <li class="nav-item"> My Menu <span class="selected"></span> </li> </ul> |
这是我的切换按钮放在标题中(在切换时消失):
1 2 3 4 5 | <span></span> <span></span> |
您可以看到
还知道的是,当我按下切换按钮以折叠边栏时,id为
发件人:
1 | page-sidebar-menu page-header-fixed page-sidebar-menu-light |
收件人:
1 | page-sidebar-menu page-header-fixed page-sidebar-menu-light page-sidebar-menu-closed |
这是我可以看到的唯一内联CSS HTML代码。我已经尝试过更改它,并使用此类默认提供页面,但是它没有任何改变。
我还应该告诉您,我正在使用Metronic HTML模板,并且我认为这也以某种方式与bootstrap侧栏进行了交互。.但是我不太确定,因为我的JS技能不是那么好...
在这里您可以找到侧边栏的有效演示:
https://keenthemes.com/metronic/preview/?page=builder
由于这是两年前的事,所以我不确定我使用的内容是否适用于OP案件。但是,如果有更多人使用类似于Metronic主题7.0.5的版本的此问题,我的解决方法是:
在主题的body标签中,只需将类放在一旁并最小化即可。就是这样(或者对我来说就是哈哈)。就我而言,我已经启用了aside-secondary-enabled类,该类仅启用了小部件。