同时切换/滑动DIV

Question

我有两个 div：

     #main_body_div and .right-sidebar

     #main_body_div {
        margin:158px 0 0 150px;
        padding:0 10px 40px 0;
        background:#fff;
        min-height:100%;
        height:auto;
        width: auto;
        overflow: auto;
     }

     .right-sidebar {
        position: absolute;
        top: 158px;
        bottom: 30px;
        right: 0;
        width: 235px;
        padding: 15px 20px 15px 15px;
        background: #f5f5f5;
     }

我尝试通过以下方式来回切换右侧边栏：

     $('.menu-link').click(function() {
        if($('#main_body_div').hasClass('open'))
        {
            $('#main_body_div').removeClass('open');
            $('#main_body_div').css('width', '-=235px');
            $('.right-sidebar').animate({width: 'toggle'});
        }
        else
        {
            $('#main_body_div').addClass('open');
            $('#main_body_div').css('width', '+=235px');
            $('.right-sidebar').animate({width: 'toggle'});
        }
    });

不幸的是它不能完全没有故障..

我想做的是滑动打开右侧边栏 - 同时将 main_body_div 调整到右侧边栏空间（反之亦然关闭侧边栏）

在主体覆盖上做右侧边栏切换并不难..

有人吗？

Answer 1

看看这是否适合你。我已经创建了一个主要内容 div 并在展开推送主要内容时右浮动菜单 html

    <div id = "page">
   <div id = "sidebar_right"class = "div_prop"></div><!--
   --><div id = "content" class = "div_prop">
    <div id = "menu_icon">&#9776;</div>
    <h1>Main Content</h1>
   </div>
</div>

css

  html,body,#page{
    width:auto;
    background:silver;
    height:100%;
}
.div_prop{
    display:inline-block;
    float:right;
    height:100%;
}
#content{
    background:grey;
    width:90%;
    color:white;

}
#sidebar_right{
    background:tomato;
    width:10%;
    display:none;
   -webkit-transition: all 2s ease-in-out; 
}
#menu_icon{
    font-size:20px;
    color:tomato;
    background:white;
    display:inline-block;
    padding:5px;
    float:right;
}
.showmenu{
    display:inline-block!important;
}
.changeback{
    background:grey!important;
}

jquery

$("#menu_icon").click(function(){
    $(this).toggleClass("changeback");
   $("#sidebar_right").toggleClass("showmenu");

});

DEMO