在頁面加載時顯示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>