打开菜单时如何展开DIV

Question

我创建了一个JSBin

当你点击菜单时，它会打开显示里面的内容。我如何编辑JQuery，以便当菜单打开时，内部div和菜单div被展开，在菜单上关闭内部div并将菜单缩小到初始大小？

原文如JSBIN链接所示：

​

​

当用户单击菜单时，它应该像这样展开：

​

​

当用户再次单击菜单时，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方法(如hide()、slideUp()等)隐藏div。

更新： working 小提琴

更改以下内容：

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

让它发挥作用。

更新的http://jsfiddle.net/tilwinjoy/5CK93/2/

Answer 2

只需将它与hidden="true"一起包含在html中，当您需要显示它时，请使用以下内容

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

Answer 3

放两个像这样的硬币：

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