如何更改切換開始的位置？

我一直在從youtube.com上的一系列視頻中學習Bootstrap。其中一個視頻構建了一個側邊欄菜單，我忠實地複製了代碼，並對其進行了實驗並使其在本地機器上運行。問題是，作爲默認，它隱藏了側欄菜單，直到我點擊切換菜單。我希望它是相反的。我想要它顯示的側邊欄菜單，直到我點擊切換按鈕。我如何編輯代碼才能做到這一點。非常感謝。如何更改切換開始的位置？

HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Sidebar template</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 
    <script src="js/jquery-1.12.3.min.js"></script> 
    <script src="js/bootstrap.min.js"></script> 
    <script src="js/init.js"></script> 
    <link rel="stylesheet" href="css/sidebar.css"> 
    <!--My own custom styles--> 
    <link href="css/myStyles.css" rel="stylesheet"> 
</head> 
<body> 

    <div id="wrapper"> 

     <!-- Sidebar --> 
     <div id="sidebar-wrapper"> 
      <ul class="sidebar-nav"> 
       <li><a href="#">Account</a></li> 
       <li><a href="#">Settings</a></li> 
       <li><a href="#">Logout</a></li> 
      </ul> 
     </div> 

     <!-- Page content --> 
     <div id="page-content-wrapper"> 
      <div class="container-fluid"> 
       <div class="row"> 
        <div class="col-lg-12"> 
         <a href="#" class="btn btn-success" id="menu-toggle">Toggle Menu</a> 
         <h1>Sidebar Layouts are Cool</h1> 
         <p>Lorem ipsum dolor sit amet consectetuer adipiscing elit sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam quis nostrud exercitation ulliam. Corper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat vel willum lunombro. Dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit. Praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p> 
        </div> 
       </div> 
      </div> 
     </div> 

    </div> 

    <!-- Menu toggle script --> 
    <script> 
     $("#menu-toggle").click(function (e){ 
      e.preventDefault(); 
      $("#wrapper").toggleClass("menuDisplayed"); 
     }); 
    </script> 

</body> 
</html>

CSS

@charset "utf-8"; 
/* CSS Document */ 

/* Sidebar */ 
#sidebar-wrapper { 
    z-index: 1; 
    position: absolute; 
    width: 0; 
    height: 100%; 
    overflow-y: hidden; 
    background: #2C3E50; 
    /*border: 2px solid red;*/ 
    opacity: 0.9; 
} 

/* Always take up entire screen */ 
#page-content-wrapper { 
    width: 100%; 
    position: absolute; 
    padding: 15px; 
    /*border: 5px solid blue;*/ 
} 


/* Change with of sidebar from 0 to 250px */ 
#wrapper.menuDisplayed #sidebar-wrapper { 
    width: 250px; 
} 

/* Since we added left padding, we need to shrink the width by 250px */ 
#wrapper.menuDisplayed #page-content-wrapper { 
    padding-left: 250px; 
} 


/* Sidebar styling - the entire ul list */ 
.sidebar-nav { 
    padding: 0; 
    list-style: none; 
} 

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

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

.sidebar-nav li a:hover { 
    background: #16A085; 
}

來源

2016-11-19 John M.

$("#wrapper").toggleClass("menuDisplayed");

這是添加和刪除，顯示菜單的類。我假設你想讓它開始顯示，請將該類添加到頁面首次加載時標記中的元素。然後它應該顯示，第一次點擊將刪除它。

來源

2016-11-19 15:50:54 Taplar

謝謝。你的建議完美運作。 –

如何更改切換開始的位置？

回答

相關問題