我正在使用一个引导侧边栏,并希望有这个侧边栏是默认折叠时,我的服务器交付我的网页。目前的状态是正常的默认引导侧边栏,这是扩展和不折叠。我会把我的侧边栏代码如下。
我已经尝试过通过jQuery切换引导工具侧栏的折叠状态,但是,使用此解决方案时,用户会看到侧栏被切换,这看起来不太好。
$(document).ready(function() {
$("#sidebar-menu-toggle").click();
});
此外,如果用户多次重新加载站点,那么在页面加载后折叠侧边栏是非常烦人的。
这是目前为止我的侧边栏 Package 器代码:
<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模板,我认为这也是与引导侧边栏互动不知何故...但我不太确定,因为我的JS技能不是很好...
您可以在这里找到侧边栏的工作演示:https://keenthemes.com/metronic/preview/?page=builder&demo=default
我不能给予你们一个工作演示的原因是.js
和.css
文件。他们不是公开的,我找不到任何CDN是托管这些文件。可能是因为他们不是免费的,你必须购买他们。所以,这是我能给你的最好的。
我的目标是改变HTML和CSS代码,使其在默认情况下提供带有折叠侧边栏的页面。再次提醒您:)
你们知道该怎么做吗?
感谢您发送编修。
2条答案
按热度按时间oewdyzsn1#
由于这是从近两年前,我不知道如果我使用的是适用于OP的情况下。但如果有更多的人与此问题使用类似的版本7.0.5的Metronic主题,我的修复方法是:
在你的主题的body标签中添加类aside-minimize。就是这样(或者对我来说就是这样,哈哈)。在我的例子中,我已经有了类aside-secondary-enabled,它只是启用了小部件。
dtcbnfnu2#
虽然这是一个老帖子,但是对于版本8,您可以将此属性添加到
<body>
标签data-kt-aside-minimize="on"