如何更改切换开始的位置？

我一直在从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

谢谢。你的建议完美运作。 –

如何更改切换开始的位置？

回答

相关问题