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

同时切换/滑动DIV

1 个答案: