如何使一個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？

回答

相關問題