我是Web开发的新手，我正在努力弄清楚如何在加载页面时默认隐藏侧边栏。我有一个ASP.NET MVC应用程序，并且正在使用此侧边栏here。
上面带有侧边栏的页面的设置如下：
@using (Html.BeginForm("Index", "Ideas", FormMethod.Post))
{
<div id="my-sidebar-context" class="widget-sidebar-context sidebar-hide">
<div class="page-body">
<nav class="widget-sidebar">
...code for items on the sidebar
</nav>
<div class="page-main">
<div id="page-content-wrapper">
<div class="container-fluid">
<div style="display:inline-block;">
<a href="#" class="navbar-toggler widget-sidebar-toggler">
<i class="fa fa-bars fa-log></i>
</a>
</div>
...code for what is populated on the page
</div>
</div>
</div>
</div>
</div>
}
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
<script>
$(function () {
$("#my-sidebar-context").simpleSidebar();
});
</script>
切换侧边栏的按钮可以正常工作，但是，即使我将类设置为包括“侧边栏隐藏”，页面加载时，默认情况下也会打开侧边栏。
我正在使用的侧边栏的javascript是：
//----------------------------------------
// side bar toggling
//----------------------------------------
var jContext = $('#my-sidebar-context');
var jSidebar = $('.widget-sidebar', jContext); // the sidebar
;(function ( $, window, document, undefined ) {
var pluginName = 'simpleSidebar';
function Plugin ( element, options ) {
this.element = element;
this._name = pluginName;
this._defaults = $.fn.simpleSidebar.defaults;
this.options = $.extend( {}, this._defaults, options );
this.init();
}
$.extend(Plugin.prototype, {
init: function () {
var jContext = $(this.element);
$('.widget-sidebar-toggler', jContext).on('click', function () {
if (jContext.hasClass("sidebar-show")) {
jContext.removeClass('sidebar-show');
jContext.addClass('sidebar-hide');
} else if (jContext.hasClass("sidebar-hide")) {
jContext.removeClass('sidebar-hide');
jContext.addClass('sidebar-show');
} else {
// default behaviour, if small screen, we show the sidebar, if large screen, we hide the sidebar
var isSmallScreen = true;
var marginLeft = parseInt(jSidebar.css('margin-left'));
if (0 === marginLeft) {
isSmallScreen = false;
}
if (true === isSmallScreen) {
jContext.addClass('sidebar-show');
} else {
jContext.addClass('sidebar-hide');
}
}
return false;
});
},
});
$.fn.simpleSidebar = function ( options ) {
this.each(function() {
if ( !$.data( this, "plugin_" + pluginName ) ) {
$.data( this, "plugin_" + pluginName, new Plugin( this, options ) );
}
});
return this;
};
$.fn.simpleSidebar.defaults = {
// property: 'value',
// onComplete: null
};
})( jQuery, window, document );
我正在使用的侧边栏的CSS是：
/*------------------------------------
- META VARIABLES
------------------------------------*/
/*------------------------------------
- SIDEBAR VARIABLES
------------------------------------*/
.widget-sidebar-context {
position: relative;
/**
make the footer go at the bottom of the screen
*/
display: flex;
flex-direction: column;
min-height: 100vh;
/*------------------------------------
- CLICKED STATES
------------------------------------*/ }
.widget-sidebar-context .page-header {
position: relative;
z-index: 1025; }
.widget-sidebar-context .page-body {
background: #e3e3e3;
flex-grow: 1;
display: flex; }
.widget-sidebar-context .page-body .widget-sidebar {
position: fixed;
width: 240px;
height: calc(100vh - 50px);
/**
Note: we use margin-left instead of transform: translateX because it seems that the latter
extends the width of the divs, which makes scrollbars appear in certain cases,
while on the other hand with margin-left the content remains constrained inside its container div boundaries.
*/
margin-left: -240px;
z-index: 1024;
display: flex;
display: -ms-flexbox;
flex-direction: column;
padding: 0;
color: #fff;
background: #262D33;
transition: margin 0.24s, opacity 0.24s;
overflow-y: auto;
opacity: 0;
/*------------------------------------
- NATURAL RESPONSIVENESS for the sidebar
------------------------------------*/ }
.widget-sidebar-context .page-body .widget-sidebar i {
margin-right: 7px; }
.widget-sidebar-context .page-body .widget-sidebar a[data-toggle="collapse"] {
position: relative; }
.widget-sidebar-context .page-body .widget-sidebar .dropdown-toggle::after {
display: block;
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%); }
.widget-sidebar-context .page-body .widget-sidebar [aria-expanded="false"]::after {
transition: transform 0.24s;
transform: rotate(-90deg); }
.widget-sidebar-context .page-body .widget-sidebar [aria-expanded="true"]::after {
transition: transform 0.24s;
transform: rotate(0deg); }
.widget-sidebar-context .page-body .widget-sidebar a[aria-expanded="true"], .widget-sidebar-context .page-body .widget-sidebar a.active {
color: #fff;
background: #315472; }
.widget-sidebar-context .page-body .widget-sidebar ul li a {
padding: 10px;
font-size: 1em;
display: block;
color: #e0e0e0;
text-decoration: none;
border-left: 2px solid transparent; }
.widget-sidebar-context .page-body .widget-sidebar ul li a:hover {
background: #414d58;
border-left: 2px solid #608ab3; }
.widget-sidebar-context .page-body .widget-sidebar ul ul a {
font-size: 0.9em !important;
padding-left: 30px !important; }
.widget-sidebar-context .page-body .widget-sidebar ul ul ul a {
padding-left: 50px !important; }
.widget-sidebar-context .page-body .widget-sidebar .active {
background-color: #072433; }
@media (min-width: 992px) {
.widget-sidebar-context .page-body .widget-sidebar {
margin-left: 0px;
opacity: 1; } }
.widget-sidebar-context .page-main {
margin-left: 0;
flex: 1;
/**
* Very important!!
* Without it, the reponsive tables (.table-responsive) class won't work properly inside cards.
* Spent 1 hour to find it...
*/
min-width: 0; }
@media (min-width: 992px) {
.widget-sidebar-context .page-main, .widget-sidebar-context .page-footer {
margin-left: 240px; } }
.widget-sidebar-context.sidebar-show .widget-sidebar {
margin-left: 0px;
opacity: 1; }
.widget-sidebar-context.sidebar-show .page-main, .widget-sidebar-context.sidebar-show .page-footer {
margin-left: 240px; }
@media (max-width: 576px) {
.widget-sidebar-context.sidebar-show .page-main::before {
position: fixed;
top: 0;
left: 0;
z-index: 1010;
width: 100%;
height: 100%;
content: "";
background: rgba(0, 0, 0, 0.7);
animation: opacity .25s; } }
.widget-sidebar-context.sidebar-hide .widget-sidebar {
margin-left: -240px;
opacity: 0; }
.widget-sidebar-context.sidebar-hide .page-main, .widget-sidebar-context.sidebar-hide .page-footer {
margin-left: 0; }
/*# sourceMappingURL=simplesidebar.css.map */
有什么建议吗？在运行它并检查元素时，在切换侧栏时，会将类设置为“ sidebar-hide”。因此，当我更改代码以使其匹配时，我期望它在默认情况下是隐藏的。但是，事实并非如此。我想念什么？
答案 0 :(得分：1)
忽略我的评论，这是一个骇人听闻的解决方案。我快速浏览了文档
http://dcdeiv.github.io/simple-sidebar/#options
您似乎需要使用以下方法指定将在选项中打开边栏的元素：
$("#my-sidebar-context").simpleSidebar({opener: '.widget-sidebar-toggler'})