Javascript 底部滑动面板-jQuery和CSS3

我想创建一个像这样的向上滑动面板，但它需要从底部向上滑动，并且应该可以调整到2个高度，顶部的内容可以自我调整，这样可以使分区滚动

我已经设计了基于的代码，但对我来说，它并没有按需要的方式工作，它覆盖在文本上，而不是压缩高度

单击h时的阶段1

单击h1时的第2阶段

HTML

---

我无法编写CSS，所有内容都可以在plnkr链接中找到

您的羽绒包装中有2个绝对元素。但是，当单击其中一个按钮时，您忘记了调整顶部内容包装的高度

页面上溢出的文本也会添加一个滚动条。因此，您需要在顶部内容包装器上添加一个overflow scroll属性，每当显示downbar包装器时，该属性将接管页面滚动条

在Plunker CSS文件中更改以下内容：

进入：

}

你能回答这个问题吗？

   <div id="down-wrapper">
      <div id="top-content-wrapper">
       ....
       <button href="#" id="down-toggle">H</button>
       <button href="#" id="down-toggle1">H1</button>
      </div>
      <div id="downbar-wrapper">Click</div>
   </div>

$(function(){
    $("#down-toggle").click(function(e) {
        e.preventDefault();
        $("#down-wrapper").toggleClass("toggled");
    });

    $("#down-toggle1").click(function(e) {
        e.preventDefault();
        $("#down-wrapper").toggleClass("toggled1");
    });


})

#down-wrapper.toggled #top-content-wrapper {
    position: absolute;
    margin-top:0;
}

#down-wrapper.toggled1 #top-content-wrapper {
    position: absolute;
    margin-top:0;
}

#down-wrapper.toggled #top-content-wrapper {
    position: absolute;
    margin-top:0;
    height:55%;
    overflow-y:scroll;
}

#down-wrapper.toggled1 #top-content-wrapper {
    position: absolute;
    margin-top:0;
    height:10%;
    overflow-y:scroll;