如何在菜单打开时展开DIV

Question

我创建了JSBin

当您点击菜单时，会打开以显示内容。如何编辑JQuery，这样当菜单打开时，内部div和菜单div展开，菜单关闭内部div和菜单缩小到初始大小？

原始如JSBIN链接所示：

当用户点击MENU时，它应该像这样展开：

当用户再次点击MENU时，DIV应该返回到原始端。

有人能帮我实现吗？

Answer 1

您可以使用JQuery slideToggle()：

$(document).ready(function(){
  $('#menu').click(function(){ //where menu is the id of your menu item
   $('#content').slideToggle(); // where content is the id of your content div
  });
});

最初你需要使用css display:none或JQuery方法隐藏div，例如hide()，slideUp()等。

更新工作FIDDLE

更改以下内容：

.cover { //removed the absolute positioning which is hiding the content div
color: white;
text-shadow: 0 2px 2px rgba(0,0,0,0.3);
font-size: 3em;
width: 200px;
height:70px;
background: linear-gradient(#30CCFC, #2CC5EF);
text-align:center;
box-shadow: inset 0 0 1px 1px #54AED0;
cursor: pointer;
transform-style: preserve-3d; 
transition: all 0.3s ease-out; 
transform-origin: bottom center; 
}

.tweet{
display:none; //initially hide the element
}

添加此脚本：

$(function () {
  $('.cover').on('click', function(){
  $('.tweet').slideToggle();
  });
});

看到它有效。

已更新FIDDLE

Answer 2

只需将其包含在hidden="true"的html中，当您需要显示时使用此

$('your-div-id').show();

Answer 3

像这样放两个div：

<div id="content">Stuff stuff stuff</div>
<br />
<div id="menu">MENU</div>

最上面一个是将要扩展的那个，就像你的图像一样。底部是按钮。现在，jQuery非常简单：

$("#content").height( 0 );
$("#menu").click(function(){
    $("#content).height( 100 );
});

如果您希望用户点击，菜单打开，再次单击并关闭：

var open = false;
$("#content").height( 0 );
$("#menu").click(function(){
    if (open == false){
        $("#content").height( 100 );
        open = true;
    } else {
        $("#content").height( 0 );
        open = false;
    }
});

Answer 4

检查fiddle。刚为div添加了一种保证金风格。这就是你要找的东西吗？

.open {
 margin-top : 80px;
 transform: rotateX(-180deg);
 box-shadow: 0 0 2px 1px rgba(0,0,0,0.3),
 inset 0 0 1px 1px #54AED0;
 background: linear-gradient(#33CEFE, #38D6FD);
}

Answer 5

像这样更改你的代码，

 $(function () {
    $('.cover').on('click', function(){
        if ($(this).css("position") == "absolute")
            $(this).css("position", "relative");
         else
            $(this).css("position", "absolute");
    });
 });