Question

我发现了这篇文章How to create sliding DIV on click?

但所有答案都是Jquery方法。有没有办法用PURE CSS创建它？我还有其他一些事情......

滚动
将触发动画的链接更改为“关闭”以使div向上滑动

以下是该帖子中示例的链接// http://shutterbugtheme.tumblr.com/

我也试过谷歌搜索，但唯一的结果是jquery方法......

Answer 1

它可以做到，虽然它有点像黑客。保留状态的两个元素（在CSS中称为：checked）是复选框和单选按钮元素。因此，如果通过使用for属性将复选框与标签相关联并添加div，则可以通过读取（隐藏）按钮的状态来获得结果：

<div class=window>
<input type=checkbox class=toggle id=punch>
<label for=punch>Punch It, Chewie<label>
<div><p>Here’s my content. Beep Boop Blurp.</p></div>
</div>

CSS：

input.toggle { display: none; }
input.toggle ~ div { height: 0px; margin: .2rem; overflow: hidden; }
input.toggle:checked ~ div { height: 180px; }

A further explanation and example that includes an animated open/close effect

Answer 2

在纯CSS中识别单击是不可能的。你可以通过以下方式实现：悬停和转换，但这样就可以在没有javascript的情况下获得。

.hover
{
    cursor: pointer;
    position: relative;
    z-index: 1;
}

.slide
{
    position: absolute;
    top: 0;
    z-index: -1;
    -webkit-transition: top 1s;
    -moz-transition: top 1s;
}

.hover:hover + .slide
{
    top: 50px;
}

http://jsfiddle.net/Kyle_/MaMu9/1/

请注意，虽然过渡是CSS3，但在IE＆lt; 9及更早版本的更好浏览器中无效。

编辑：在CSS中使用：focus属性发布了另一个答案之后：有一点需要注意：你必须在元素外部单击以使其向下滑动以使其向上滑动，否则它可以正常工作。 / p>

请注意，该元素必须具有tabindex ='1'（或任何有意义的数字，具体取决于元素在文档中的位置）才能生效。

.hover:focus + .slide
{
    top: 50px;
    -webkit-transition: top 1s;
}

http://jsfiddle.net/Kyle_Sevenoaks/MaMu9/1/

Answer 3

您可以识别元素上的“焦点”事件，并使用CSS过渡对其进行操作。

这是一个例子，当点击时将向下移动div 50px

<强>标记

<div tabindex='1' id='box'></div>

<强> CSS

#box {
 background-color:#3a6d90;
 width:100px; height:100px;    

 transition: margin-top 2s;
 -moz-transition: margin-top 2s; /* Firefox 4 */
 -webkit-transition: margin-top 2s; /* Safari and Chrome */
 -o-transition: margin-top 2s; /* Opera */
}

#box:focus {
 margin-top:50px;
 outline:0;
}

工作示例：http://jsfiddle.net/NBHeJ/

Answer 4

这是如何入门的一个很好的例子。您可以在底部看到，他们发布了他们使用的动画功能的源代码，尽管这是javascript。

sliding-js-generic

如果你想要纯粹的CSS，我会使用ws3schools多年来一直是很好的资源，但要注意很多依靠浏览器支持你想要的效果是否有效。

w3schools-css

基本结构使它们具有效果，你只需要沿着体内两个div的行，顶部隐藏和容器可见，并运行隐藏div的动画来显示推动另一个div保持内联。

<body>
 <div id="hidden-div"></div>
 <div id="main-content-div"></div>
</body>

Answer 5

可以使用target伪类来检测点击。

将按钮href设置为滑动div的id。

然后可以通过在高度上使用css3 transition在slidingDiv：target类上设置滑动div的高度来完成向下滑动。

我认为原始按钮没有办法改变其href以使用纯css关闭滑动div，但是你总是可以在滑动div上添加一个关闭按钮来关闭它。

此关闭按钮的工作原理是在滑动div类上添加相同的转换。

这是 WORKING DEMO 。

享受。

Answer 6

易：

.contents {
  background: yellow;
  color: rgba(0, 0, 0, .8);
  padding: 20px;
  margin:0;
}
.slide-up, .slide-down {
  overflow:hidden
}
.slide-up > div, .slide-down > div {
  margin-top: -25%;
  transition: margin-top 0.4s ease-in-out;
}
.slide-down > div {            
  margin-top: 0;
}

工作示例： https://jsfiddle.net/webarthur/3ep33h5s/

Answer 7

另一种做同样事情的方法：

.contents {
  background: yellow;
  color: rgba(0, 0, 0, .8);
  padding: 20px;
  margin:0;
}
.slide-up, .slide-down {
  overflow:hidden;
}
.slide-up > div, .slide-down > div {
  transform: translateY(-100%);
  transition: .4s ease-in-out;
}
.slide-down > div {            
  transform: translateY(0);
}

工作示例：the documentation

Answer 8

运行此代码。

input {
  display: none;
}

label {
  cursor: pointer;
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid;
  border-radius: 4px;
  background: tomato;
  color: #FFF;
  font-family: arial;
  -webkit-transition: background-color 0.1s, color 0.1s;
}

label:hover {
  background: #blue;
  color: #blue;
}

.test {
  -webkit-transition: height .3s ease;
  height: 0;
  overflow: hidden;
  width: 200px;
  background: tomato;
  margin-top: 10px;
  color: #FFF;
}

input:checked + .test {
  height: 100px;
}

<label for="check">Click me</label>

<input id="check" type="checkbox">

<div class="test">
  <p>I am some hidden text</p>
</div>

单击Pure CSS向下滑动div？

8 个答案: