Question

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

我使用http://aozora.github.io/bootplus/index.html Bootplus CSS对网站有一个不错的外观并使其具有响应性。

我能够使用以下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>

但是当我使用下面的代码隐藏菜单时，页面不再显示在中间居中，而是向左对齐而没有左边距。

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

我知道我使用css代码执行此操作，但我很难使用切换机制，我可以使用它来回到之前的css设置，而无需从头开始重新定义所有内容。

我面临的另一个问题是每当我触摸左边的菜单时，我需要触摸两次以使其消失。要显示菜单，只需单击“菜单”按钮即可，但隐藏需要两次触摸。

万分感谢你的帮助。

Answer 1

默认定位为static，因此会忽略内联left规则。您尝试将其重新设置为absolute，然后margin-left不适用（我不确定您的DOM结构是什么）。你为什么使用这么多内联CSS？我建议更好的方法是为菜单的显示和非显示状态设置css类。

CSS：

.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%;
}

JS：

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

另外，请避免使用这么多ID。他们在这里没有优势。

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

1 个答案: