显示隐藏的左侧导航？

Question

我在位于屏幕左侧的菜单上工作，并使用位于主要内容区域上的按钮隐藏/显示菜单。

当屏幕宽度小于768px时，我使用css隐藏菜单，我遇到的问题是因为菜单已经被隐藏，当用户单击按钮而不是显示菜单时，它试图再次隐藏菜单。

我在尝试解释问题时遇到了很多麻烦，这是现场演示，其中包含我所拥有的所有代码。

该代码在台式机上运行良好，问题在于屏幕小于768px。

这是tham用于显示/隐藏菜单和移动内容的功能

  $('#menu-toggle').click(function(e)
  {
    e.preventDefault();
    $('#sidebar').toggleClass('show-hide');
    $('#page-content').toggleClass('show-hide');
  });

CSS

.show-hide
{
    margin-left: -250px;
}

完整代码实时演示： https ： //jsfiddle.net/c7cpLq9m/

Answer 1

刚刚将其添加到媒体查询中：

#wrapper .show-hide {
  margin-left: 0;
}

 $('#menu-toggle, .mobile-trigger').click(function(e) { e.preventDefault(); $('#sidebar').toggleClass('show-hide'); $('#page-content').toggleClass('show-hide'); }); 

 .container-fluid {} #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; } .mobile-trigger{ display: none; } #sidebar { z-index: 1000; position: fixed; height: 100%; width: 250px; overflow-y: auto; background: #1b1e24; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .show-hide { margin-left: -250px; } ul.sidebar-nav { list-style: none; padding: 0; } ul.sidebar-nav li a { display: block; padding: 10px 25px; color: #8b91a0; text-decoration: none; transition: all 0.3s ease; font-size: 1.1em; } ul.sidebar-nav li span { padding-right: 10px; } ul.sidebar-nav li a:hover { color: #fff; background: rgba(255, 255, 255, 0.2); } #page-content { transition: 0.5s; /* position: absolute; */ padding-left: 255px; /* width:100%; background: grey;*/ } @media ( max-width: 768px) { #sidebar { margin-left: -250px; } #wrapper .show-hide{ margin-left: 0; } .mobile-trigger{ display: block; } #page-content { padding-left: 0px; } } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div id="wrapper"> <div id="sidebar"> <ul class="sidebar-nav"> <li><a class='mobile-trigger' href="#"><span class="glyphicon glyphicon-menu-hamburger"></span> Hide mobile menu</a></li> <li class="sidebar-brand"><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li> <li><a href="#"><span class="glyphicon glyphicon-user"></span> Contacts</a></li> <li><a href="#"><span class="glyphicon glyphicon-picture"></span> Content</a></li> <li><a href="#"><span class="glyphicon glyphicon-inbox"></span> Inbound</a></li> <li><a href="#"><span class="glyphicon glyphicon-envelope"></span> Outbound</a></li> <li><a href="#"><span class="glyphicon glyphicon-globe"></span> Social</a></li> <li><a href="#"><span class="glyphicon glyphicon-folder-close"></span> Automation</a></li> <li><a href="#"><span class="glyphicon glyphicon-list-alt"></span> Reports</a></li> <li><a href="#"><span class="glyphicon glyphicon-cog"></span> Settings</a></li> <li><a href="#"><span class="glyphicon glyphicon-comment"></span> Feedback</a></li> </ul> </div> <div id="page-content"> <div class="container-fluid"> <div class="row"> <div class="col-lg-6"> <h1>Duis aute</h1> <hr> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <a href="#" class="btn btn-default" id="menu-toggle" style="float:rigth">Toggle Menu</a> <h1>Duis aute</h1> <hr> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <h1>Excepteur</h1> <hr> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <h1>Excepteur</h1> <hr> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <h1>Excepteur</h1> <hr> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <h1>Excepteur</h1> <hr> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="col-lg-6"> <h1>Excepteur</h1> <hr> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <h1>Excepteur</h1> <hr> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <h1>Excepteur</h1> <hr> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <h1>Excepteur</h1> <hr> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <h1>Excepteur</h1> <hr> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <h1>Excepteur</h1> <hr> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </div> </div> </div> </div> <!-- ./wrapper --> 

更新 ：

如果您不推送内容，则在移动设备上效果会更好，因为它看起来非常混乱。 最好在内容上具有菜单，并在菜单内添加一个按钮以将其关闭。 为此，我在菜单内添加了一个额外的元素，添加了类mobile-trigger ，默认情况下，我已将其隐藏在桌面上，并使用display: block;在移动设备上进行了display: block; 。 还向点击事件添加了选择器mobile-trigger 。

Answer 2

在lonut的答案中，最好添加以下样式：

#menu-toggle {
  position: absolute;
  top: 0;
  right: 10px;
}

使切换菜单按钮位于页面的右上方。