向下滑动div点击Pure CSS？ [英] Slide down div on click Pure CSS?

问题描述

我找到此信息点击时如何创建滑动DIV？

但是所有的答案都是Jquery方法。有什么办法用PURE CSS创建它吗？
我还有一些其他的事情，以及...

1. 我可以添加什么，



2. 将触发动画的链接更改为关闭
   

   这是一个链接到该博文中的示例//
   http：// shutterbugtheme .tumblr.com /

   
   
   

   我也试过googling，但唯一的结果是jquery方法...

   解决方案

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

    < div class = window> 
   < input type = checkbox class = toggle id = punch> 
   < label for = punch> Punch It，Chewie< label> 
   < div>< p>这是我的内容。 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; } 
     

   进一步的说明和包含动画打开/关闭效果的示例。

   
   

   I found this post How to create sliding DIV on click?

   But all the answers are Jquery methods. Is there any way to create this with PURE CSS? I have a couple other things in mind as well...

   1. What can I add to make the slide down div stay put when scrolling
   2. Change the link that triggers the animation to "Close" in order to make the div slide back up

   Here is a link to the example in that post// http://shutterbugtheme.tumblr.com/

   I've also tried googling but the only results are jquery methods...

   解决方案

   It can be done, although it's a little bit of a hack. The two elements that retain state (referred to in CSS as :checked) are the checkbox and radio button element. So if you associate a checkbox with a label by using a for attribute and add a div, you can get a result by reading the status of the (hidden) button:

   <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>
   

   And the 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.

   这篇关于向下滑动div点击Pure CSS？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！