关于javascript:Bootstrap侧边栏-默认情况下折叠? (Metronic HTML模板)

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>

您可以看到 is targeting the navbar-collapse类。因此,我认为这与它有关,但我不

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

发件人:

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类,该类仅启用了小部件。