Jquery 如何使一个div增加高度，同时缩小另一个div？

有一个很棒的菜单，可以让你从侧面滑入菜单，把身体推到一边。我喜欢从底部滑入面板的选项（切换底部菜单），但我想做两个更改：

新显示的面板必须保持在原位，直到再次单击相同的按钮（用于切换面板），使其滑开

新面板在滑入时必须将另一个元素从下到上收缩（我想自己选择该元素）。我不想推身体。。。只需收缩任意元素

标记的一个示例是：

<div class="container">
    <div class="row>
        <div class="col-lg-12">
                <a href="sliding-panel">Toggle Sliding panel!</a>
        </div>
        <div class="col-lg-12">
            <div id="myMap"></div>
            <div id="sliding-panel"></div>
        </div>
    </div>
</div>

对于您的第一个问题：新显示的面板必须保持在原位，直到再次单击相同的按钮（用于切换它），使其滑开。如果您查看jPushMenu，有一个选项可以执行此操作-
closeOnClickOutside
。当jPushMenu初始化时，您可以将
closeOnClickOutside
定义为
false
（默认情况下，它是
true
）

对于第二个问题：新面板在滑入时必须将另一个元素从下到上收缩（我想自己选择该元素）。我不想推身体。。。只需收缩任意元素。只使用jPushMenu并实现您想要的是不可能的。任何库都不能这样做，因为有几个逻辑必须手动处理：


您需要哪种类型的收缩动画
应收缩哪些元素

但是，您可以收听切换菜单的
单击
事件，自己进行收缩

总之，这两个问题中的功能可以通过以下代码段实现：

  jQuery(document).ready(function($) {
    $('.toggle-menu').jPushMenu({
      closeOnClickOutside: false
    });

    $('.toggle-menu').on('click', function() {
      if($(this).hasClass('menu-active')) {
        // menu slides in, need to shrink some elements.
      } else {
        // menu slides out, need to put these elements back.
      }
    });
  });