javascript - jQuery 侧边栏 - 默认情况下隐藏它的问题

Question

我是网络开发的新手，我正在努力弄清楚如何在加载页面时默认隐藏边栏。我有一个 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 */

有什么建议吗？运行它并检查元素时，切换侧边栏时，它会将类设置为“侧边栏隐藏”。因此，当我更改代码以匹配它时，我希望它默认隐藏。然而，事实并非如此。我错过了什么？

Answer 1

忽略我的评论，这是一个 hacky 解决方案。我快速浏览了一下文档

http://dcdeiv.github.io/simple-sidebar/#options

看起来您需要使用以下内容指定将在选项中打开侧边栏的元素:

$("#my-sidebar-context").simpleSidebar({opener: '.widget-sidebar-toggler'})