jQuery的div幻燈片效果與另一個div自動調整寬度

Question

我正在嘗試通過菜單滑動菜單項來使giva滑入/滑出效果，以便在用戶需要時為主要內容提供更多空間-更像Google日歷漢堡菜單的點擊行為。

我正在嘗試並排放置兩個div。 第一個是菜單，第二個是其他內容。 我正在嘗試使用jQuery UI切換幻燈片第一分區。

兩個問題-

1. 只有將固定寬度指定為2格時，才能將它們並排放置。

   如何使第二個div占用其余空間？

2. 僅在滑出第二個div完成后才調整其寬度。

   如何使寬度平滑增加？

這是代碼https://codepen.io/coder92/pen/Yjomwd

 $(document).ready(function(){ //adds click function to the hamburger menu $( "#menu" ).click(function() { $(".menuDiv").toggle('slide'); }); }); 

 .menuDiv{ background-color: green; width:200px; float:left; } .contentDiv{ //width:100%; width:500px; color:white; background-color:blue; float:left; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <span id="menu"> toggle </span> <div> <div class="menuDiv"> Menu </div> <div class="contentDiv"> <table> <tr> <td> data </td> </tr> </table> </div> </div> 

提前致謝！

Answer 1

為了順利滑動，您可以使用

• $(".menuDiv").animate({width: 'toggle'}, 350);

並使數據占據頁面的其余部分

• 移除float: left; 來自.contentDiv （浮動使元素的大小不完整）
• 增加margin: 0 auto; （這使數據占據了整個頁面的其余部分）
• 添加overflow: hidden （阻止藍色從綠色下方移動）

簽出： https : //codepen.io/Funce/pen/QBeLOr

Answer 2

Google日歷執行此操作的方式是利用flex顯示， hidden溢出和負margin來達到效果。 您可以參考以下示例：

 $(document).ready(function(){ //adds click function to the hamburger menu $("#menu").click(function () { var $menu = $(".menuDiv"); if ($menu.is(':visible')) { $menu.animate({'margin-left':-200}, function() { $menu.hide(); }); } else { $menu.show().animate({'margin-left':0}); } }); }); 

 .containerDiv { display: flex; overflow-x: hidden; } .menuDiv{ background-color: green; width:200px; } .contentDiv{ color:white; background-color:blue; float:left; flex:1 1 auto; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <span id="menu"> toggle </span> <div class="containerDiv"> <div class="menuDiv"> Menu </div> <div class="contentDiv"> <table> <tr> <td> data </td> </tr> </table> </div> </div> 

請注意，我使用jQuery animate方法，而Google Calendar使用CSS transition 。