javascript - 如何创建这个下拉框

Question

我正在尝试创建这个向下滑动的下拉框，并在向下滑动时保留底部图像，其中包含内容。我一直试图找到专门用于此的脚本，但我找不到任何脚本。也许有人可以给我一个先机或指导。或者有人有我可以使用的脚本吗？

我的目标是:创建一个下拉菜单，在点击时上下滑动，但保持这种外观。

Answer 1

这是您使用 jQuery 描述的内容的简单幻灯片内容:http://jsfiddle.net/t9hq9/19/你可以用你的底部图像替换我的 #bottom，我的只是用带有边框半径的 css 制作的。

HTML:

<div id="content">CONTENT</div>
<div id="bottom"></div>

CSS:

#content {
width: 400px;
border-left: 10px solid #FA802F;
border-right: 10px solid #FA802F;
text-align: center;
padding: 100px 0px 100px 0px;
display: none;
}

#bottom {
width: 420px;
height: 100px;

background-color: #FA802F;
-webkit-border-bottom-left-radius: 50px;
-moz-border-bottom-left-radius: 50px;
border-bottom-left-radius: 100px;

-webkit-border-bottom-right-radius: 50px;
-moz-border-bottom-right-radius: 50px;
border-bottom-right-radius: 100px;   
}

JS:

$('#bottom').toggle(
  function() {
    $('#content').slideDown();
  },
  function() {
    $('#content').slideUp();
  }
);