在页面加载时显示side-nav - jquery/html

Question

如何让我的侧面导航显示在页面加载？我仍然希望能够切换。

//Toggle On/Off 
 
$("#menu-toggle").click(function(e) { 
 
    e.preventDefault(); 
 
    $("#wrapper").toggleClass("toggled"); 
 
});

body { 
 
    overflow-x: hidden; 
 
} 
 

 

 
/* Toggle Styles */ 
 

 
#wrapper { 
 
    padding-left: 0; 
 
    -webkit-transition: all 0.5s ease; 
 
    -moz-transition: all 0.5s ease; 
 
    -o-transition: all 0.5s ease; 
 
    transition: all 0.5s ease; 
 
} 
 

 
#wrapper.toggled { 
 
    padding-left: 325px; 
 
} 
 

 
#sidebar-wrapper { 
 
    z-index: 1000; 
 
    position: fixed; 
 
    left: 325px; 
 
    width: 0; 
 
    height: 100%; 
 
    margin-left: -325px; 
 
    overflow-y: auto; 
 
    background: #286090; 
 
    -webkit-transition: all 0.5s ease; 
 
    -moz-transition: all 0.5s ease; 
 
    -o-transition: all 0.5s ease; 
 
    transition: all 0.5s ease; 
 
} 
 

 
#wrapper.toggled #sidebar-wrapper { 
 
    width: 325px; 
 
} 
 

 
#page-content-wrapper { 
 
    width: 100%; 
 
    position: absolute; 
 
    padding: 15px; 
 
} 
 

 
#wrapper.toggled #page-content-wrapper { 
 
    position: absolute; 
 
    margin-right: -325px; 
 
} 
 

 

 
/* Sidebar Styles */ 
 

 
.sidebar-nav { 
 
    position: absolute; 
 
    top: 0; 
 
    width: 325px; 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
} 
 

 
.sidebar-nav li { 
 
    text-indent: 20px; 
 
    line-height: 40px; 
 
} 
 

 
.sidebar-nav li a { 
 
    display: block; 
 
    text-decoration: none; 
 
    color: #fff; 
 
} 
 

 
.sidebar-nav li a:hover { 
 
    text-decoration: none; 
 
    color: #f2f2f2; 
 
    background: rgba(255, 255, 255, 0.2); 
 
} 
 

 
.sidebar-nav li a:active, 
 
.sidebar-nav li a:focus { 
 
    text-decoration: none; 
 
} 
 

 
.sidebar-nav>.sidebar-brand { 
 
    height: 65px; 
 
    font-size: 22px; 
 
    line-height: 60px; 
 
} 
 

 
.sidebar-nav>.sidebar-brand a { 
 
    color: #ffffff; 
 
} 
 

 
.sidebar-nav>.sidebar-brand a:hover { 
 
    color: #fff; 
 
    background: none; 
 
} 
 

 
@media(min-width:768px) { 
 
    #wrapper { 
 
    padding-left: 0; 
 
    } 
 
    #wrapper.toggled { 
 
    padding-left: 325px; 
 
    } 
 
    #sidebar-wrapper { 
 
    width: 0; 
 
    } 
 
    #wrapper.toggled #sidebar-wrapper { 
 
    width: 325px; 
 
    } 
 
    #page-content-wrapper { 
 
    padding: 20px; 
 
    position: relative; 
 
    } 
 
    #wrapper.toggled #page-content-wrapper { 
 
    position: relative; 
 
    margin-right: 0; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div id="wrapper"> 
 
    <!-- Sidebar --> 
 
    <div id="sidebar-wrapper"> 
 
    <div id="page-content-wrapper"> 
 
     <div class="container-fluid"> 
 
     <div class="row"> 
 
      <div class="col-lg-12"> 
 
      <a class="pull-right btn btn-primary btn-lg" href="#menu-toggle" id="menu-toggle">☰</a> 
 
      </div><br> 
 
      <br> 
 
     </div> 
 
     </div> 
 
    </div>

Answer 1

只需添加.click()

//Toggle On/Off 
 
$("#menu-toggle").click(function(e) { 
 
    e.preventDefault(); 
 
    $("#wrapper").toggleClass("toggled"); 
 
}).click(); //<<<<<<<<<<<<<<<<<<<<< add .click() here

body { 
 
    overflow-x: hidden; 
 
} 
 

 

 
/* Toggle Styles */ 
 

 
#wrapper { 
 
    padding-left: 0; 
 
    -webkit-transition: all 0.5s ease; 
 
    -moz-transition: all 0.5s ease; 
 
    -o-transition: all 0.5s ease; 
 
    transition: all 0.5s ease; 
 
} 
 

 
#wrapper.toggled { 
 
    padding-left: 325px; 
 
} 
 

 
#sidebar-wrapper { 
 
    z-index: 1000; 
 
    position: fixed; 
 
    left: 325px; 
 
    width: 0; 
 
    height: 100%; 
 
    margin-left: -325px; 
 
    overflow-y: auto; 
 
    background: #286090; 
 
    -webkit-transition: all 0.5s ease; 
 
    -moz-transition: all 0.5s ease; 
 
    -o-transition: all 0.5s ease; 
 
    transition: all 0.5s ease; 
 
} 
 

 
#wrapper.toggled #sidebar-wrapper { 
 
    width: 325px; 
 
} 
 

 
#page-content-wrapper { 
 
    width: 100%; 
 
    position: absolute; 
 
    padding: 15px; 
 
} 
 

 
#wrapper.toggled #page-content-wrapper { 
 
    position: absolute; 
 
    margin-right: -325px; 
 
} 
 

 

 
/* Sidebar Styles */ 
 

 
.sidebar-nav { 
 
    position: absolute; 
 
    top: 0; 
 
    width: 325px; 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
} 
 

 
.sidebar-nav li { 
 
    text-indent: 20px; 
 
    line-height: 40px; 
 
} 
 

 
.sidebar-nav li a { 
 
    display: block; 
 
    text-decoration: none; 
 
    color: #fff; 
 
} 
 

 
.sidebar-nav li a:hover { 
 
    text-decoration: none; 
 
    color: #f2f2f2; 
 
    background: rgba(255, 255, 255, 0.2); 
 
} 
 

 
.sidebar-nav li a:active, 
 
.sidebar-nav li a:focus { 
 
    text-decoration: none; 
 
} 
 

 
.sidebar-nav>.sidebar-brand { 
 
    height: 65px; 
 
    font-size: 22px; 
 
    line-height: 60px; 
 
} 
 

 
.sidebar-nav>.sidebar-brand a { 
 
    color: #ffffff; 
 
} 
 

 
.sidebar-nav>.sidebar-brand a:hover { 
 
    color: #fff; 
 
    background: none; 
 
} 
 

 
@media(min-width:768px) { 
 
    #wrapper { 
 
    padding-left: 0; 
 
    } 
 
    #wrapper.toggled { 
 
    padding-left: 325px; 
 
    } 
 
    #sidebar-wrapper { 
 
    width: 0; 
 
    } 
 
    #wrapper.toggled #sidebar-wrapper { 
 
    width: 325px; 
 
    } 
 
    #page-content-wrapper { 
 
    padding: 20px; 
 
    position: relative; 
 
    } 
 
    #wrapper.toggled #page-content-wrapper { 
 
    position: relative; 
 
    margin-right: 0; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div id="wrapper"> 
 
    <!-- Sidebar --> 
 
    <div id="sidebar-wrapper"> 
 
    <div id="page-content-wrapper"> 
 
     <div class="container-fluid"> 
 
     <div class="row"> 
 
      <div class="col-lg-12"> 
 
      <a class="pull-right btn btn-primary btn-lg" href="#menu-toggle" id="menu-toggle">☰</a> 
 
      </div><br> 
 
      <br> 
 
     </div> 
 
     </div> 
 
    </div>

Answer 2

body { 
    overflow-x: hidden; 
} 

/* Toggle Styles */ 

#wrapper { 
    padding-left: 0; 
    -webkit-transition: all 0.5s ease; 
    -moz-transition: all 0.5s ease; 
    -o-transition: all 0.5s ease; 
    transition: all 0.5s ease; 
} 

#wrapper.toggled { 
    padding-left: 325px; 
} 

#sidebar-wrapper { 
    z-index: 1000; 
    position: fixed; 
    left: 325px; 
    width: 0; 
    height: 100%; 
    margin-left: -325px; 
    overflow-y: auto; 
    background: #286090; 
    -webkit-transition: all 0.5s ease; 
    -moz-transition: all 0.5s ease; 
    -o-transition: all 0.5s ease; 
    transition: all 0.5s ease; 
} 

#wrapper.toggled #sidebar-wrapper { 
    width: 325px; 
} 

#page-content-wrapper { 
    width: 100%; 
    position: absolute; 
    padding: 15px; 
} 

#wrapper.toggled #page-content-wrapper { 
    position: absolute; 
    margin-right: -325px; 
} 

/* Sidebar Styles */ 

.sidebar-nav { 
    position: absolute; 
    top: 0; 
    width: 325px; 
    margin: 0; 
    padding: 0; 
    list-style: none; 
} 

.sidebar-nav li { 
    text-indent: 20px; 
    line-height: 40px; 
} 

.sidebar-nav li a { 
    display: block; 
    text-decoration: none; 
    color: #fff; 
} 

.sidebar-nav li a:hover { 
    text-decoration: none; 
    color: #f2f2f2; 
    background: rgba(255,255,255,0.2); 
} 

.sidebar-nav li a:active, 
.sidebar-nav li a:focus { 
    text-decoration: none; 
} 

.sidebar-nav > .sidebar-brand { 
    height: 65px; 
    font-size: 22px; 
    line-height: 60px; 
} 

.sidebar-nav > .sidebar-brand a { 
    color: #ffffff; 
} 

.sidebar-nav > .sidebar-brand a:hover { 
    color: #fff; 
    background: none; 
} 

@media(min-width:768px) { 
    #wrapper { 
     padding-left: 0; 
    } 

    #wrapper.toggled { 
     padding-left: 325px; 
    } 

    #sidebar-wrapper { 
     width: 0; 
    } 

    #wrapper.toggled #sidebar-wrapper { 
     width: 325px; 
    } 

    #page-content-wrapper { 
     padding: 20px; 
     position: relative; 
    } 

    #wrapper.toggled #page-content-wrapper { 
     position: relative; 
     margin-right: 0; 
    } 
} 

Answer 3

我不打算用你的代码...但是这应该focu帮助秒。你可以做的第一件事是'触发'一个点击事件来立即切换类。您可以做的另一件事是默认情况下将CSS类的“菜单打开”放在主体上 - 并从那里切换。你也可以用JS添加那个类。

如何让我的侧面导航显示在页面加载？我仍然想 能够切换。

// using some jQuery 
 
var $body = $('body'); 
 
var $menuToggle = $('[rel="menu-toggle"]'); 
 

 
$menuToggle.on('click', function() { 
 
    $body.toggleClass('menu-open'); 
 
}).trigger('click'); 
 
// trigger a click to start (on load or whatever) 
 

 
// or not as a chained method like this: 
 
// $menuToggle.trigger('click');

.sidebar { 
 
    background: gray; 
 
    padding: 1rem; 
 
} 
 

 
body.menu-open .sidebar { 
 
    background: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button class='menu-toggle' rel='menu-toggle'>☰</button> 
 

 
<aside class='sidebar'>sidebar</aside>

Answer 4

我怎样才能让我的身边导航显示在网页加载？我仍然希望能够切换。

• 首先，我建议你把切换按钮指出，HTML结构，所以它不与侧边栏隐藏，从而防止闭合后要重新切换它。
• 一旦切换结束并始终存在，将其置于您的愿望，在这种情况下，由于.pull-right类，它位于右侧。
• 切换侧边栏document.ready()在文档完成加载时显示为打开状态。

$(document).ready(function() { 
 
    //toggle sidebar on document ready 
 
    $("#wrapper").toggleClass("toggled"); 
 
}); 
 

 
//Toggle On/Off 
 
$("#menu-toggle").on("click", function(e) { 
 
    e.preventDefault(); 
 
    $("#wrapper").toggleClass("toggled"); 
 
});

body { 
 
    overflow-x: hidden; 
 
} 
 

 
/* Toggle Styles */ 
 

 
#wrapper { 
 
    padding-left: 0; 
 
    -webkit-transition: all 0.5s ease; 
 
    -moz-transition: all 0.5s ease; 
 
    -o-transition: all 0.5s ease; 
 
    transition: all 0.5s ease; 
 
} 
 

 
#wrapper.toggled { 
 
    padding-left: 325px; 
 
} 
 

 
#sidebar-wrapper { 
 
    z-index: 1000; 
 
    position: fixed; 
 
    left: 325px; 
 
    width: 0; 
 
    height: 100%; 
 
    margin-left: -325px; 
 
    overflow-y: auto; 
 
    background: #286090; 
 
    -webkit-transition: all 0.5s ease; 
 
    -moz-transition: all 0.5s ease; 
 
    -o-transition: all 0.5s ease; 
 
    transition: all 0.5s ease; 
 
} 
 

 
#wrapper.toggled #sidebar-wrapper { 
 
    width: 325px; 
 
} 
 

 
#page-content-wrapper { 
 
    width: 100%; 
 
    position: absolute; 
 
    padding: 15px; 
 
} 
 

 
#wrapper.toggled #page-content-wrapper { 
 
    position: absolute; 
 
    margin-right: -325px; 
 
} 
 

 
/* Sidebar Styles */ 
 

 
.sidebar-nav { 
 
    position: absolute; 
 
    top: 0; 
 
    width: 325px; 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
} 
 

 
.sidebar-nav li { 
 
    text-indent: 20px; 
 
    line-height: 40px; 
 
} 
 

 
.sidebar-nav li a { 
 
    display: block; 
 
    text-decoration: none; 
 
    color: #fff; 
 
} 
 

 
.sidebar-nav li a:hover { 
 
    text-decoration: none; 
 
    color: #f2f2f2; 
 
    background: rgba(255, 255, 255, 0.2); 
 
} 
 

 
.sidebar-nav li a:active, 
 
.sidebar-nav li a:focus { 
 
    text-decoration: none; 
 
} 
 

 
.sidebar-nav>.sidebar-brand { 
 
    height: 65px; 
 
    font-size: 22px; 
 
    line-height: 60px; 
 
} 
 

 
.sidebar-nav>.sidebar-brand a { 
 
    color: #ffffff; 
 
} 
 

 
.sidebar-nav>.sidebar-brand a:hover { 
 
    color: #fff; 
 
    background: none; 
 
} 
 

 
@media(min-width:768px) { 
 
    #wrapper { 
 
    padding-left: 0; 
 
    } 
 
    #wrapper.toggled { 
 
    padding-left: 325px; 
 
    } 
 
    #sidebar-wrapper { 
 
    width: 0; 
 
    } 
 
    #wrapper.toggled #sidebar-wrapper { 
 
    width: 325px; 
 
    } 
 
    #page-content-wrapper { 
 
    padding: 20px; 
 
    position: relative; 
 
    } 
 
    #wrapper.toggled #page-content-wrapper { 
 
    position: relative; 
 
    margin-right: 0; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div id="wrapper"> 
 
    <!-- Sidebar --> 
 
    <div id="sidebar-wrapper"> 
 
    <div id="page-content-wrapper"> 
 
     <div class="container-fluid"> 
 
     <div class="row"> 
 
      <div class="col-lg-12"> 
 
      <br> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <a class="pull-right btn btn-primary btn-lg" href="#menu-toggle" id="menu-toggle">☰</a>