如何使用jQuery从左侧切换幻灯片菜单？

对于iPhone等手机上使用的移动页面，我正在尝试创建一个菜单，该菜单将从左侧滑入，并将当前内容推到右侧，就像手机应用程序一样。触摸所显示菜单中除链接以外的任何位置，菜单应再次消失，页面应与以前一样再次显示

我使用bootpluscss让网站看起来很不错，同时也让它更具响应性

我能够使用以下jQuery代码使幻灯片运行良好：

$('#leftmenu').hide();
$('#button').on('click',function(){
  $('#content').css({'position':'fixed'}).animate({"left":"85%"});
  $('#leftmenu').css({'position':'fixed', 'width':'85%'});
  $('#leftmenu').fadeIn('slow');
});

对于菜单，我有以下html

<div id="leftmenu" class="container" style="width: 85%; left:0%; height: 100%; background-color:silver">
   <br />
   <p><h3>Quick links</h3></p>
   <p><h4><a href="">Home</a></h4></p>
   <p><h4><a href="">Page 1</a></h4></p>
   <p><h4><a href="">Page 2</a></h4></p>
</div>
<div class="navbar .navbar-inverse" style="background-color:silver; vertical-align:middle">
  <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
    <i id="button" class="fa fa-bars"></i>
  </a>
</div>

我知道我是用css代码做的，但我很难用切换机制让它工作，通过切换机制，我可以回到以前的css设置，而不必从头重新定义所有内容

我面临的另一个问题是，每当我触摸左边的菜单时，我需要触摸两次才能使它消失。要显示菜单，只需轻触菜单按钮，但隐藏需要两次轻触

---

非常感谢您的帮助。

默认定位是静态的，因此忽略内联左规则。您试图将其设置回绝对值，但左边的边距不适用我不确定您的DOM结构是什么。为什么要使用这么多的内联CSS？ 我建议的一个更好的方法是为菜单的显示和非显示状态设置css类

CSS:

JS:

另外，避免使用太多的ID。他们在这里没有比班级优越的地方

$('#leftmenu').on('click',function(){
  $('#content').css({'position':'absolute'}).animate({"left":"0%"});
  $('#leftmenu').fadeOut('slow');
  $('#content').fadeIn('slow');
});

.leftmenu{
  // whatever base rules you have
  // css3 animations set here - better performance than JS.
}
.content{
  // whatever base rules you have
  // css3 animations set here - better performance than JS.
}
.leftmenu-displayed{
  position: fixed;
  width: 85%;
}
.content-displayed{
  position: fixed;
  left: 85%;
}

$('.leftmenu').on('click', function(){
  $(this).toggleClass('leftmenu-displayed');
  $('.content').toggleClass('content-displayed');
});