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

有一个伟大的plugin，它允许从侧面滑动菜单，并推开身体。我喜欢具有从底部的面板滑动件（切换底部菜单）的选择，但我想两个更改：如何使一个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>

点击链接/ HREF会引起滑动板垂直增长，而在地图将收缩至最小高度（约300像素）。

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

来源

2017-05-09 pookie

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

对于第二个问题：当它滑入时，新面板必须从下往上收缩另一个元素（我想自己选择元素）。我不想推动身体...只是缩小任意元素。不可能只使用jPushMenu并实现你想要的。

什么样的收缩动画你想要的：因为有几个逻辑必须手动处理没有图书馆可以做到这一点。
哪些元素应该收缩。

但是，你可以听切换菜单的click事件，使收缩工作自己。

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

：

总之，在这些2个问题的功能可以用下面的代码段中实现

来源

2017-05-10 08:00:17 shaochuancs

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

回答

相关问题