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

【问题标题】：How to make one div increase height while shrinking another div?如何使一个div增加高度同时缩小另一个div？
【发布时间】：2017-10-08 00:51:03
【问题描述】：

有一个很棒的plugin，它允许从侧面滑入菜单并将身体推开。我喜欢让面板从底部滑入的选项（切换底部菜单），但我想要两个更改：

新显示的面板必须保持在原位，直到再次单击相同的按钮（用于切换它），使其滑开。
新面板必须在滑入时从下到上缩小另一个元素（我想自己选择元素）。我不想推动身体......只是缩小任意元素。

标记的一个例子是：

<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>

单击链接/href 会导致滑动面板垂直增长，而地图会缩小到最小高度（大约 300 像素）。

有没有这样的插件？如果没有，我该怎么做？很高兴使用 JQuery 或纯 CSS 选项。

【问题讨论】：

标签： jquery css

【解决方案1】：

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

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

你想要什么样的收缩动画。
应缩小哪些元素。

但是，您可以收听切换菜单的 click 事件并让 shrink 自己工作。

综上，这2题中的特性可以用如下代码sn-p来实现：

  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.
      }
    });
  });

【讨论】：