同時切換/幻燈片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

看看這是確定了你。我已經創建了一個主要內容股利和右浮動菜單時擴張推動的主要內容 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