我正在位于屏幕左侧的菜单上工作，并且位于主内容区域的按钮隐藏/显示菜单。显示隐藏左侧导航？
当屏幕宽度小于768px我使用CSS隐藏菜单，即时通讯存在的问题是，因为菜单已被隐藏，当用户单击按钮而不是显示它试图隐藏的菜单菜单再次。
我有很多麻烦试图解释这个问题， 这里是现场演示，所有我有的代码。
代码工作正常的桌面，问题是当屏幕小于768px。
这是使用显示/隐藏菜单和内容移动
$('#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/
只是添加到了媒体查询：
#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;
/* \t position: absolute; */
padding-left: 255px;
/* \t width:100%; \t \t \t
\t 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;在移动设备上显示它。还将选择器mobile-trigger添加到点击事件。
在lonut的回答其更好添加此样式：
#menu-toggle {
position: absolute;
top: 0;
right: 10px;
}
为了使页面的切换菜单按钮右上角。
请分享您的代码。 – Ionut
@lonut https://jsfiddle.net/c7cpLq9m/ – Pedro
你看到的大，红色的警告框，说你需要链接到的jsfiddle时发表[MCVE]你的问题，但你去了你的方式来解决那。只要你问问题并在你的问题中发布你的代码。 – j08691