Question

我有一个默认打开的侧边栏，我希望能够点击一个菜单图标，我的侧边栏会滑入以显示更多内容：

 #sidebar {
  width: 210px;
  height: 100%;
  position: fixed;
  background: #2a3542;
 }

 #main-content {
  margin-left: 210px;
 }

 <div class="navbar">toggle icon in here</div>
 <div id="sidebar">sidebar content here</div>
 <section id="main-content">main page content here</section>

我希望能够切换菜单，但是我想我必须添加并删除保留 - 留在#main-content？

任何帮助都会很棒感谢

Answer 1

~~这将有效（Example）~~

~~$（'。navbar'）。on（'click'，function（）{ $（'＃sidebar，＃main-content'）。toggle（）; }）;~~

~~隐藏元素后，您不需要删除边距或该元素的任何其他样式，因为它已被隐藏。~~

更新：使用jQuery UI的{{1}}（Example）

slide

更新：您也可以使用$('.navbar').on('click', function(){ $('#sidebar').toggle('slide', { direction: 'left' }, 1000); $('#main-content').animate({ 'margin-left' : $('#main-content').css('margin-left') == '0px' ? '210px' : '0px' }, 1000); });否.animate()

尝试此操作（Example）

jQuery UI

jQuery用内容切换左侧边栏菜单

1 个答案: