Question

我正在尝试giva菜单滑入/滑出效果，以便在用户需要时为主要内容提供更多空间-更像Google日历汉堡菜单的点击行为。

我正在尝试并排两个div。第一个是菜单，第二个是其他内容。我正在使用jQuery UI尝试切换幻灯片的第一格。

两个问题-

只有当我给第二格固定宽度时，才能将它们并排放置。

如何使第二个div占用其余空间？
仅在滑出第二个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日历执行此操作的方式是结合使用$(":button").wrapAll("<div class=''/>");显示，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;
}

请注意，我使用jQuery <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>方法，而Google Calendar使用CSS animate。

jQuery的div幻灯片效果与另一个div自动调整宽度

2 个答案: