如何在没有jquery的情况下制作像这样的下拉框？（示例内部）

Question

Here's an example of what i'm trying to do.

我不能使用jquery，我可以用纯粹的js和css来做这个吗？

谢谢：）

Answer 1

你应该添加一些代码，我会在你做的时候添加一些代码：）

您需要使用css动画并让div使用默认状态display:none, height: 0;

然后使用JS，您可以添加隐藏类。该课程将display:block, height: 50px

Answer 2

如果你能提供一些代码会更好。 您可以查看下面的代码集代码。我已经在CSS上实现了它，没有涉及到js。检查它是否有帮助。

<div class="main">
  <div class="next">

  </div>
</div>

.main{
  min-height:50px;
  background-color:red;
  transition:all 0.8s ease-out;
  margin-bottom:5px;
  cursor:pointer;
}
.next{
  height:0px;
  background-color:green;
  transition:all 0.5s ease-out
}
.main:hover{
  padding-top:50px;
}
.main:hover .next{
  height:50px;

}

http://codepen.io/gauravshankar/pen/ZYjZEd

如果您使用复选框或单选按钮，也可以单击此操作。