jQuery 切换带有内容的左侧边栏菜单

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 上添加和删除 margin-left？

任何帮助都会很棒谢谢

Answer 1

这会起作用(Example)

$('.navbar').on('点击', function(){ $('#sidebar, #main-content').toggle(); });

一旦元素被隐藏，您就不需要移除该元素的边距或任何其他样式，因为它已经被隐藏了。

更新:使用 jQuery UI 的 slide ( Example )

$('.navbar').on('click', function(){
    $('#sidebar').toggle('slide', { direction: 'left' }, 1000);
    $('#main-content').animate({
        'margin-left' : $('#main-content').css('margin-left') == '0px' ? '210px' : '0px'
    }, 1000);
});

更新:您也可以尝试这个(Example)，使用.animate() no jQuery UI

$('.navbar').on('click', function(){
    if( $('#sidebar').is(':visible') ) {
        $('#sidebar').animate({ 'width': '0px' }, 'slow', function(){
            $('#sidebar').hide();
        });
        $('#main-content').animate({ 'margin-left': '0px' }, 'slow');
    }
    else {
        $('#sidebar').show();
        $('#sidebar').animate({ 'width': '210px' }, 'slow');
        $('#main-content').animate({ 'margin-left': '210px' }, 'slow');
    }
});