Bootstrap侧边栏-默认情况下折叠？ （Metronic HTML模板）

Question

我正在使用引导工具栏，并且希望在我的服务器交付我的网页时默认关闭该工具栏。目前的状态是正常的默认引导侧栏，该侧栏已扩展且未折叠。我将边栏代码放在下面。

我已经尝试通过jQuery切换引导程序侧栏的折叠状态，但是，使用此解决方案，用户会看到侧栏被切换了，这看起来不太好。只需执行以下行：

$(document).ready(function() {
    $("#sidebar-menu-toggle").click();
});

此外，如果用户多次重新加载网站，则在页面加载后折叠边栏会很烦人。

到目前为止，这是我的侧边栏包装器代码：

<div class="page-sidebar-wrapper">
    <div id="page-sidebar-menu" class="page-sidebar navbar-collapse collapse">    
        <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">
                <div class="sidebar-toggler">
                    <span></span>
                </div>
            </li>

            <li class="nav-item active">
                <a href="javascript:void(0)" class="nav-link "> My Menu </a>
                <span class="selected"></span>
            </li>

            <li class="nav-item">
                <a href="javascript:void(0)" class="nav-link "> My Menu </a>
                <span class="selected"></span>
            </li>

            <li class="nav-item">
                <a href="javascript:void(0)" class="nav-link "> My Menu </a>
                <span class="selected"></span>
            </li>

        </ul>
    </div>
</div>

这是我的切换按钮放在标题中（在切换时消失）：

<div id="sidebar-menu-toggle" class="menu-toggler sidebar-toggler">
    <span></span>
</div>

<a href="javascript:;" class="menu-toggler responsive-toggler" data-toggle="collapse" data-target=".navbar-collapse">
    <span></span>
</a>

如您所见，<a href.. id="page-sidebar-menu"是针对navbar-collapse类的。因此，我认为这与它有关，但我不确定。

还知道的事实是，当我按下切换按钮以折叠边栏时，id为page-sidebar-menu-ul的元素正在更改类。

发件人：

page-sidebar-menu  page-header-fixed page-sidebar-menu-light

收件人：

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&demo=default

之所以无法为大家提供有效的演示，是因为.js和.css文件。它们不是公开的，我找不到托管这些文件的任何CDN。可能是因为它们不是免费的，您必须购买它们。所以，这是我能给你的最好的东西。

我的目标是更改HTML和CSS代码，以便默认情况下提供带有折叠边栏的页面。只是再次提醒您：）

你们对如何执行此操作有任何想法吗？

致以问候，谢谢！

Answer 1

由于这是两年前的事，所以我不确定我使用的内容是否适用于OP案件。但是，如果有更多人使用类似于Metronic主题7.0.5的版本的此问题，我的解决方法是：

在主题的body标签中，只需在最小化位置添加类即可。就是这样（或者对我来说是哈哈）。就我而言，我已经启用了aside-secondary-enabled类，该类仅启用了小部件。