默认情况下如何使侧边栏导航栏打开

Question

我正在使用可折叠边栏导航的网站。 加载时关闭它时效果很好，但是我想做的是默认情况下将其打开并具有关闭和重新打开的功能。

下面是正在使用的代码。 如果您需要其他任何说明，请告诉我。

就像我说的那样，菜单可以很好地打开和关闭，但是我希望在开始打开然后单击关闭时可以颠倒角色。 我觉得这是我忽略的小事，但我不确定。

 $(document).ready(function() { var trigger = $('.hamburger'), overlay = $('.overlay'), isClosed = false; trigger.click(function() { hamburger_cross(); }); function hamburger_cross() { if (isClosed == true) { //overlay.hide(); trigger.removeClass('is-open'); trigger.addClass('is-closed'); isClosed = false; } else { //overlay.show(); trigger.removeClass('is-closed'); trigger.addClass('is-open'); isClosed = true; } } $('[data-toggle="offcanvas"]').click(function() { $('#wrapper').toggleClass('toggled'); }); }); 

 body { position: relative; overflow-x: hidden; } body, html { height: 100%; } .nav .open > a, .nav .open > a:hover, .nav .open > a:focus { background-color: transparent; } /*-------------------------------*/ /* Wrappers */ /*-------------------------------*/ #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: 220px; } #sidebar-wrapper { z-index: 1000; left: 220px; width: 0; height: 100%; margin-left: -220px; overflow-y: auto; overflow-x: hidden; background: #1a1a1a; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } #sidebar-wrapper::-webkit-scrollbar { display: none; } #wrapper.toggled #sidebar-wrapper { width: 220px; } #page-content-wrapper { width: 100%; padding-top: 70px; } #wrapper.toggled #page-content-wrapper { position: absolute; margin-right: -220px; } /*-------------------------------*/ /* Sidebar nav styles */ /*-------------------------------*/ .sidebar-nav { position: absolute; top: 0; width: 220px; margin: 0; padding: 0; list-style: none; } .sidebar-nav li { position: relative; line-height: 20px; display: inline-block; width: 100%; } .sidebar-nav li:before { content: ''; position: absolute; top: 0; left: 0; z-index: -1; height: 100%; width: 3px; background-color: #1c1c1c; -webkit-transition: width .2s ease-in; -moz-transition: width .2s ease-in; -ms-transition: width .2s ease-in; transition: width .2s ease-in; } .sidebar-nav li:first-child a { color: #fff; background-color: #1a1a1a; } .sidebar-nav li:nth-child(2):before { background-color: #ec1b5a; } .sidebar-nav li:nth-child(3):before { background-color: #79aefe; } .sidebar-nav li:nth-child(4):before { background-color: #314190; } .sidebar-nav li:nth-child(5):before { background-color: #279636; } .sidebar-nav li:nth-child(6):before { background-color: #7d5d81; } .sidebar-nav li:nth-child(7):before { background-color: #ead24c; } .sidebar-nav li:nth-child(8):before { background-color: #2d2366; } .sidebar-nav li:nth-child(9):before { background-color: #35acdf; } .sidebar-nav li:nth-child(10):before { background-color: #ec1b5a; } .sidebar-nav li:hover:before, .sidebar-nav li.open:hover:before { width: 100%; -webkit-transition: width .2s ease-in; -moz-transition: width .2s ease-in; -ms-transition: width .2s ease-in; transition: width .2s ease-in; } .sidebar-nav li a { display: block; color: #ddd; text-decoration: none; padding: 10px 15px 10px 30px; } .sidebar-nav li a:hover, .sidebar-nav li a:active, .sidebar-nav li a:focus, .sidebar-nav li.open a:hover, .sidebar-nav li.open a:active, .sidebar-nav li.open a:focus { color: #fff; text-decoration: none; background-color: transparent; } .sidebar-nav > .sidebar-brand { height: 65px; font-size: 20px; line-height: 44px; } .sidebar-nav .dropdown-menu { position: relative; width: 100%; padding: 0; margin: 0; border-radius: 0; border: none; background-color: #222; box-shadow: none; } /*-------------------------------*/ /* Hamburger-Cross */ /*-------------------------------*/ .hamburger { position: fixed; top: 20px; z-index: 999; display: block; width: 32px; height: 32px; margin-left: 15px; background: transparent; border: none; } .hamburger:hover, .hamburger:focus, .hamburger:active { outline: none; } .hamburger.is-closed:before { content: ''; display: block; width: 100px; font-size: 14px; color: #fff; line-height: 32px; text-align: center; opacity: 0; -webkit-transform: translate3d(0, 0, 0); -webkit-transition: all .35s ease-in-out; } .hamburger.is-closed:hover:before { opacity: 1; display: block; -webkit-transform: translate3d(-100px, 0, 0); -webkit-transition: all .35s ease-in-out; } .hamburger.is-closed .hamb-top, .hamburger.is-closed .hamb-middle, .hamburger.is-closed .hamb-bottom, .hamburger.is-open .hamb-top, .hamburger.is-open .hamb-middle, .hamburger.is-open .hamb-bottom { position: absolute; left: 0; height: 4px; width: 100%; } .hamburger.is-closed .hamb-top, .hamburger.is-closed .hamb-middle, .hamburger.is-closed .hamb-bottom { background-color: #1a1a1a; } .hamburger.is-closed .hamb-top { top: 5px; -webkit-transition: all .35s ease-in-out; } .hamburger.is-closed .hamb-middle { top: 50%; margin-top: -2px; } .hamburger.is-closed .hamb-bottom { bottom: 5px; -webkit-transition: all .35s ease-in-out; } .hamburger.is-closed:hover .hamb-top { top: 0; -webkit-transition: all .35s ease-in-out; } .hamburger.is-closed:hover .hamb-bottom { bottom: 0; -webkit-transition: all .35s ease-in-out; } .hamburger.is-open .hamb-top, .hamburger.is-open .hamb-middle, .hamburger.is-open .hamb-bottom { background-color: #1a1a1a; } .hamburger.is-open .hamb-top, .hamburger.is-open .hamb-bottom { top: 50%; margin-top: -2px; } .hamburger.is-open .hamb-top { -webkit-transform: rotate(45deg); -webkit-transition: -webkit-transform .2s cubic-bezier(.73, 1, .28, .08); } .hamburger.is-open .hamb-middle { display: none; } .hamburger.is-open .hamb-bottom { -webkit-transform: rotate(-45deg); -webkit-transition: -webkit-transform .2s cubic-bezier(.73, 1, .28, .08); } .hamburger.is-open:before { content: ''; display: block; width: 100px; font-size: 14px; color: #fff; line-height: 32px; text-align: center; opacity: 0; -webkit-transform: translate3d(0, 0, 0); -webkit-transition: all .35s ease-in-out; } .hamburger.is-open:hover:before { opacity: 1; display: block; -webkit-transform: translate3d(-100px, 0, 0); -webkit-transition: all .35s ease-in-out; } /*-------------------------------*/ /* Overlay */ /*-------------------------------*/ /*.overlay { position: fixed; display: none; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(250,250,250,.8); z-index: 1; }*/ 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="wrapper"> <div class="overlay"></div> <!-- Sidebar --> <nav class="navbar navbar-inverse navbar-fixed-top" id="sidebar-wrapper" role="navigation"> <ul class="nav sidebar-nav"> <li class="sidebar-brand"> <a href="#"> Brand </a> </li> <li> <a href="#">Home</a> </li> <li> <a href="#">Participant</a> </li> <li> <a href="#">Interaction</a> </li> <li> <a href="#">Fulfillment</a> </li> <li> <a href="#">Reports</a> </li> <li> <a href="#">References</a> </li> <li> <a href="#">Admin</a> </li> </ul> </nav> <!-- /#sidebar-wrapper --> <!-- Page Content --> <div id="page-content-wrapper"> <button type="button" class="hamburger is-closed" data-toggle="offcanvas"> <span class="hamb-top"></span> <span class="hamb-middle"></span> <span class="hamb-bottom"></span> </button> <div class="container"> <div class="row"> <div class="col-lg-8 col-lg-offset-2"> <h1>Quit Smoking</h1> <p>Why I want to quit I would save money. I would not smell like a stale cigarette. I would not have to look for a place to smoke all the time. My health would be better. I don't like feeling addicted. My family would stop nagging me to quit. Food would taste better. I would fit in better socially. I would feel better about my future. I would set a good example for my family and friends.</p> </div> </div> </div> </div> <!-- /#page-content-wrapper --> </div> <!-- /#wrapper --> 

Answer 1

只需在<div id="wrapper" >添加class="toggled" ，然后isClosed = true;

并将<button type="button" class="hamburger is-open" data-toggle="offcanvas">从is-closed更改is-open

 $(document).ready(function() { var trigger = $('.hamburger'), overlay = $('.overlay'), isClosed = true; trigger.click(function() { hamburger_cross(); }); function hamburger_cross() { if (isClosed == true) { //overlay.hide(); trigger.removeClass('is-open'); trigger.addClass('is-closed'); isClosed = false; } else { //overlay.show(); trigger.removeClass('is-closed'); trigger.addClass('is-open'); isClosed = true; } } $('[data-toggle="offcanvas"]').click(function() { $('#wrapper').toggleClass('toggled'); }); }); 

 body { position: relative; overflow-x: hidden; } body, html { height: 100%; } .nav .open > a, .nav .open > a:hover, .nav .open > a:focus { background-color: transparent; } /*-------------------------------*/ /* Wrappers */ /*-------------------------------*/ #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: 220px; } #sidebar-wrapper { z-index: 1000; left: 220px; width: 0; height: 100%; margin-left: -220px; overflow-y: auto; overflow-x: hidden; background: #1a1a1a; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } #sidebar-wrapper::-webkit-scrollbar { display: none; } #wrapper.toggled #sidebar-wrapper { width: 220px; } #page-content-wrapper { width: 100%; padding-top: 70px; } #wrapper.toggled #page-content-wrapper { position: absolute; margin-right: -220px; } /*-------------------------------*/ /* Sidebar nav styles */ /*-------------------------------*/ .sidebar-nav { position: absolute; top: 0; width: 220px; margin: 0; padding: 0; list-style: none; } .sidebar-nav li { position: relative; line-height: 20px; display: inline-block; width: 100%; } .sidebar-nav li:before { content: ''; position: absolute; top: 0; left: 0; z-index: -1; height: 100%; width: 3px; background-color: #1c1c1c; -webkit-transition: width .2s ease-in; -moz-transition: width .2s ease-in; -ms-transition: width .2s ease-in; transition: width .2s ease-in; } .sidebar-nav li:first-child a { color: #fff; background-color: #1a1a1a; } .sidebar-nav li:nth-child(2):before { background-color: #ec1b5a; } .sidebar-nav li:nth-child(3):before { background-color: #79aefe; } .sidebar-nav li:nth-child(4):before { background-color: #314190; } .sidebar-nav li:nth-child(5):before { background-color: #279636; } .sidebar-nav li:nth-child(6):before { background-color: #7d5d81; } .sidebar-nav li:nth-child(7):before { background-color: #ead24c; } .sidebar-nav li:nth-child(8):before { background-color: #2d2366; } .sidebar-nav li:nth-child(9):before { background-color: #35acdf; } .sidebar-nav li:nth-child(10):before { background-color: #ec1b5a; } .sidebar-nav li:hover:before, .sidebar-nav li.open:hover:before { width: 100%; -webkit-transition: width .2s ease-in; -moz-transition: width .2s ease-in; -ms-transition: width .2s ease-in; transition: width .2s ease-in; } .sidebar-nav li a { display: block; color: #ddd; text-decoration: none; padding: 10px 15px 10px 30px; } .sidebar-nav li a:hover, .sidebar-nav li a:active, .sidebar-nav li a:focus, .sidebar-nav li.open a:hover, .sidebar-nav li.open a:active, .sidebar-nav li.open a:focus { color: #fff; text-decoration: none; background-color: transparent; } .sidebar-nav > .sidebar-brand { height: 65px; font-size: 20px; line-height: 44px; } .sidebar-nav .dropdown-menu { position: relative; width: 100%; padding: 0; margin: 0; border-radius: 0; border: none; background-color: #222; box-shadow: none; } /*-------------------------------*/ /* Hamburger-Cross */ /*-------------------------------*/ .hamburger { position: fixed; top: 20px; z-index: 999; display: block; width: 32px; height: 32px; margin-left: 15px; background: transparent; border: none; } .hamburger:hover, .hamburger:focus, .hamburger:active { outline: none; } .hamburger.is-closed:before { content: ''; display: block; width: 100px; font-size: 14px; color: #fff; line-height: 32px; text-align: center; opacity: 0; -webkit-transform: translate3d(0, 0, 0); -webkit-transition: all .35s ease-in-out; } .hamburger.is-closed:hover:before { opacity: 1; display: block; -webkit-transform: translate3d(-100px, 0, 0); -webkit-transition: all .35s ease-in-out; } .hamburger.is-closed .hamb-top, .hamburger.is-closed .hamb-middle, .hamburger.is-closed .hamb-bottom, .hamburger.is-open .hamb-top, .hamburger.is-open .hamb-middle, .hamburger.is-open .hamb-bottom { position: absolute; left: 0; height: 4px; width: 100%; } .hamburger.is-closed .hamb-top, .hamburger.is-closed .hamb-middle, .hamburger.is-closed .hamb-bottom { background-color: #1a1a1a; } .hamburger.is-closed .hamb-top { top: 5px; -webkit-transition: all .35s ease-in-out; } .hamburger.is-closed .hamb-middle { top: 50%; margin-top: -2px; } .hamburger.is-closed .hamb-bottom { bottom: 5px; -webkit-transition: all .35s ease-in-out; } .hamburger.is-closed:hover .hamb-top { top: 0; -webkit-transition: all .35s ease-in-out; } .hamburger.is-closed:hover .hamb-bottom { bottom: 0; -webkit-transition: all .35s ease-in-out; } .hamburger.is-open .hamb-top, .hamburger.is-open .hamb-middle, .hamburger.is-open .hamb-bottom { background-color: #1a1a1a; } .hamburger.is-open .hamb-top, .hamburger.is-open .hamb-bottom { top: 50%; margin-top: -2px; } .hamburger.is-open .hamb-top { -webkit-transform: rotate(45deg); -webkit-transition: -webkit-transform .2s cubic-bezier(.73, 1, .28, .08); } .hamburger.is-open .hamb-middle { display: none; } .hamburger.is-open .hamb-bottom { -webkit-transform: rotate(-45deg); -webkit-transition: -webkit-transform .2s cubic-bezier(.73, 1, .28, .08); } .hamburger.is-open:before { content: ''; display: block; width: 100px; font-size: 14px; color: #fff; line-height: 32px; text-align: center; opacity: 0; -webkit-transform: translate3d(0, 0, 0); -webkit-transition: all .35s ease-in-out; } .hamburger.is-open:hover:before { opacity: 1; display: block; -webkit-transform: translate3d(-100px, 0, 0); -webkit-transition: all .35s ease-in-out; } /*-------------------------------*/ /* Overlay */ /*-------------------------------*/ /*.overlay { position: fixed; display: none; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(250,250,250,.8); z-index: 1; }*/ 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="wrapper" class="toggled" > <div class="overlay"></div> <!-- Sidebar --> <nav class="navbar navbar-inverse navbar-fixed-top" id="sidebar-wrapper" role="navigation"> <ul class="nav sidebar-nav"> <li class="sidebar-brand"> <a href="#"> Brand </a> </li> <li> <a href="#">Home</a> </li> <li> <a href="#">Participant</a> </li> <li> <a href="#">Interaction</a> </li> <li> <a href="#">Fulfillment</a> </li> <li> <a href="#">Reports</a> </li> <li> <a href="#">References</a> </li> <li> <a href="#">Admin</a> </li> </ul> </nav> <!-- /#sidebar-wrapper --> <!-- Page Content --> <div id="page-content-wrapper"> <button type="button" class="hamburger is-open" data-toggle="offcanvas"> <span class="hamb-top"></span> <span class="hamb-middle"></span> <span class="hamb-bottom"></span> </button> <div class="container"> <div class="row"> <div class="col-lg-8 col-lg-offset-2"> <h1>Quit Smoking</h1> <p>Why I want to quit I would save money. I would not smell like a stale cigarette. I would not have to look for a place to smoke all the time. My health would be better. I don't like feeling addicted. My family would stop nagging me to quit. Food would taste better. I would fit in better socially. I would feel better about my future. I would set a good example for my family and friends.</p> </div> </div> </div> </div> <!-- /#page-content-wrapper --> </div> <!-- /#wrapper --> 

Answer 2

当然，只要反转您的切换类，就必须更改按钮类以开始将其显示为打开而不是关闭。 尝试这个：

 $(document).ready(function() { var trigger = $('.hamburger'), overlay = $('.overlay'), isClosed = true; trigger.click(function() { hamburger_cross(); }); function hamburger_cross() { if (isClosed == true) { //overlay.hide(); trigger.removeClass('is-open'); trigger.addClass('is-closed'); isClosed = false; } else { //overlay.show(); trigger.removeClass('is-closed'); trigger.addClass('is-open'); isClosed = true; } } $('[data-toggle="offcanvas"]').click(function() { $('#wrapper').toggleClass('toggled'); }); }); 

 body { position: relative; overflow-x: hidden; } body, html { height: 100%; } .nav .open > a, .nav .open > a:hover, .nav .open > a:focus { background-color: transparent; } /*-------------------------------*/ /* Wrappers */ /*-------------------------------*/ #wrapper { padding-left: 220px; //Instead of 0px -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: 0px; //Instead of 220px } #sidebar-wrapper { z-index: 1000; left: 220px; width: 0; height: 100%; margin-left: -220px; overflow-y: auto; overflow-x: hidden; background: #1a1a1a; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } #sidebar-wrapper::-webkit-scrollbar { display: none; } #wrapper.toggled #sidebar-wrapper { width: 220px; } #page-content-wrapper { width: 100%; padding-top: 70px; } #wrapper.toggled #page-content-wrapper { position: absolute; margin-right: -220px; } /*-------------------------------*/ /* Sidebar nav styles */ /*-------------------------------*/ .sidebar-nav { position: absolute; top: 0; width: 220px; margin: 0; padding: 0; list-style: none; } .sidebar-nav li { position: relative; line-height: 20px; display: inline-block; width: 100%; } .sidebar-nav li:before { content: ''; position: absolute; top: 0; left: 0; z-index: -1; height: 100%; width: 3px; background-color: #1c1c1c; -webkit-transition: width .2s ease-in; -moz-transition: width .2s ease-in; -ms-transition: width .2s ease-in; transition: width .2s ease-in; } .sidebar-nav li:first-child a { color: #fff; background-color: #1a1a1a; } .sidebar-nav li:nth-child(2):before { background-color: #ec1b5a; } .sidebar-nav li:nth-child(3):before { background-color: #79aefe; } .sidebar-nav li:nth-child(4):before { background-color: #314190; } .sidebar-nav li:nth-child(5):before { background-color: #279636; } .sidebar-nav li:nth-child(6):before { background-color: #7d5d81; } .sidebar-nav li:nth-child(7):before { background-color: #ead24c; } .sidebar-nav li:nth-child(8):before { background-color: #2d2366; } .sidebar-nav li:nth-child(9):before { background-color: #35acdf; } .sidebar-nav li:nth-child(10):before { background-color: #ec1b5a; } .sidebar-nav li:hover:before, .sidebar-nav li.open:hover:before { width: 100%; -webkit-transition: width .2s ease-in; -moz-transition: width .2s ease-in; -ms-transition: width .2s ease-in; transition: width .2s ease-in; } .sidebar-nav li a { display: block; color: #ddd; text-decoration: none; padding: 10px 15px 10px 30px; } .sidebar-nav li a:hover, .sidebar-nav li a:active, .sidebar-nav li a:focus, .sidebar-nav li.open a:hover, .sidebar-nav li.open a:active, .sidebar-nav li.open a:focus { color: #fff; text-decoration: none; background-color: transparent; } .sidebar-nav > .sidebar-brand { height: 65px; font-size: 20px; line-height: 44px; } .sidebar-nav .dropdown-menu { position: relative; width: 100%; padding: 0; margin: 0; border-radius: 0; border: none; background-color: #222; box-shadow: none; } /*-------------------------------*/ /* Hamburger-Cross */ /*-------------------------------*/ .hamburger { position: fixed; top: 20px; z-index: 999; display: block; width: 32px; height: 32px; margin-left: 15px; background: transparent; border: none; } .hamburger:hover, .hamburger:focus, .hamburger:active { outline: none; } .hamburger.is-closed:before { content: ''; display: block; width: 100px; font-size: 14px; color: #fff; line-height: 32px; text-align: center; opacity: 0; -webkit-transform: translate3d(0, 0, 0); -webkit-transition: all .35s ease-in-out; } .hamburger.is-closed:hover:before { opacity: 1; display: block; -webkit-transform: translate3d(-100px, 0, 0); -webkit-transition: all .35s ease-in-out; } .hamburger.is-closed .hamb-top, .hamburger.is-closed .hamb-middle, .hamburger.is-closed .hamb-bottom, .hamburger.is-open .hamb-top, .hamburger.is-open .hamb-middle, .hamburger.is-open .hamb-bottom { position: absolute; left: 0; height: 4px; width: 100%; } .hamburger.is-closed .hamb-top, .hamburger.is-closed .hamb-middle, .hamburger.is-closed .hamb-bottom { background-color: #1a1a1a; } .hamburger.is-closed .hamb-top { top: 5px; -webkit-transition: all .35s ease-in-out; } .hamburger.is-closed .hamb-middle { top: 50%; margin-top: -2px; } .hamburger.is-closed .hamb-bottom { bottom: 5px; -webkit-transition: all .35s ease-in-out; } .hamburger.is-closed:hover .hamb-top { top: 0; -webkit-transition: all .35s ease-in-out; } .hamburger.is-closed:hover .hamb-bottom { bottom: 0; -webkit-transition: all .35s ease-in-out; } .hamburger.is-open .hamb-top, .hamburger.is-open .hamb-middle, .hamburger.is-open .hamb-bottom { background-color: #1a1a1a; } .hamburger.is-open .hamb-top, .hamburger.is-open .hamb-bottom { top: 50%; margin-top: -2px; } .hamburger.is-open .hamb-top { -webkit-transform: rotate(45deg); -webkit-transition: -webkit-transform .2s cubic-bezier(.73, 1, .28, .08); } .hamburger.is-open .hamb-middle { display: none; } .hamburger.is-open .hamb-bottom { -webkit-transform: rotate(-45deg); -webkit-transition: -webkit-transform .2s cubic-bezier(.73, 1, .28, .08); } .hamburger.is-open:before { content: ''; display: block; width: 100px; font-size: 14px; color: #fff; line-height: 32px; text-align: center; opacity: 0; -webkit-transform: translate3d(0, 0, 0); -webkit-transition: all .35s ease-in-out; } .hamburger.is-open:hover:before { opacity: 1; display: block; -webkit-transform: translate3d(-100px, 0, 0); -webkit-transition: all .35s ease-in-out; } /*-------------------------------*/ /* Overlay */ /*-------------------------------*/ /*.overlay { position: fixed; display: none; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(250,250,250,.8); z-index: 1; }*/ 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="wrapper"> <div class="overlay"></div> <!-- Sidebar --> <nav class="navbar navbar-inverse navbar-fixed-top" id="sidebar-wrapper" role="navigation"> <ul class="nav sidebar-nav"> <li class="sidebar-brand"> <a href="#"> Brand </a> </li> <li> <a href="#">Home</a> </li> <li> <a href="#">Participant</a> </li> <li> <a href="#">Interaction</a> </li> <li> <a href="#">Fulfillment</a> </li> <li> <a href="#">Reports</a> </li> <li> <a href="#">References</a> </li> <li> <a href="#">Admin</a> </li> </ul> </nav> <!-- /#sidebar-wrapper --> <!-- Page Content --> <div id="page-content-wrapper"> <button type="button" class="hamburger is-open" data-toggle="offcanvas"> <span class="hamb-top"></span> <span class="hamb-middle"></span> <span class="hamb-bottom"></span> </button> <div class="container"> <div class="row"> <div class="col-lg-8 col-lg-offset-2"> <h1>Quit Smoking</h1> <p>Why I want to quit I would save money. I would not smell like a stale cigarette. I would not have to look for a place to smoke all the time. My health would be better. I don't like feeling addicted. My family would stop nagging me to quit. Food would taste better. I would fit in better socially. I would feel better about my future. I would set a good example for my family and friends.</p> </div> </div> </div> </div> <!-- /#page-content-wrapper --> </div> <!-- /#wrapper --> 

Answer 3

一种快速而肮脏的解决方案是在$(document).ready函数的末尾添加以下内容。

$('.hamburger').trigger('click');

如果您想在页面加载时向访问者显示动画，则可能是理想的结果。

https://jsfiddle.net/tb65wrfa/

Answer 4

只需添加trigger.trigger('click'); 在文档准备功能的末尾。 （不要放在外面）

实际上，我们要做的就是在文档准备就绪后立即模拟对该汉堡图标的点击。 因此您无需更改任何现有代码

http://api.jquery.com/trigger/

Answer 5

只需添加在id="wrapper" toggled类

并将更改class="hamburger is-closed"到class="hamburger is-open"

编辑代码