HTML & CSS3 向下滑动答案

【问题标题】：HTML & CSS3 Slide DownHTML & CSS3 向下滑动
【发布时间】：2013-05-28 18:42:15
【问题描述】：

我编写了以下 jQuery 代码，当单击链接时，它会使 div 向下滑动。没有jQuery的纯css3可以吗？

HTML

<header>
  <h1>Heading</h1>
</header>
<section>
  <a href='#' id='click'>Lorem ipsum dolor sit amet, consectetur adipiscing elit vestibulum convallis.</a>
  <div id='show'></div>
</section>

jQuery

$('#click').click(function() {
$('#show').slideDown('slow', function() {
// Animation complete.
  });
});

【问题讨论】：

@F4r-20 该问题使用 jQuery，我不想使用它
@SusanRobinson，我已经更新了我的答案，告诉我你还想要什么

标签： jquery html css

【解决方案1】：

是的，但你可能还是想要一些 javascript。

#show {
   padding: 20px;
   background: #ccc;
   max-height:0;
   overflow:hidden;
   -webkit-transition:max-height 1s;
   -moz-transition:max-height 1s;
   transition:max-height 1s;
}

#show:target {
    max-height:1000px; /* you can't transistion to height:auto */
}

http://jsfiddle.net/richbradshaw/hgdrw/1/

这里有几件事：

the :target selector
如果不使用JS取消该行为，页面会跳转到ID
关闭它的唯一方法是更改 URL，使其末尾不包含#show

如果我这样做，我会使用我在这里拥有的，但不是目标选择器，而是使用 JS 向#show 添加一个名为“active”的类，并将#show:target 更改为#show.active。

http://jsfiddle.net/richbradshaw/hgdrw/2/

我在这里使用jQuery，因为它很简单，

根据我的经验，目标选择器在实践中并不是很好。

【讨论】：

【解决方案2】：

DEMO FIDDLE WITHOUT JQUERY

这里是代码 -

html -

<label for="test1" class="test">Click Me ;)</label>
<input type="checkbox" id="test1"/>
<div class="test2">
    Yo!! you clicked it, now I am visible to you with a smooth animation
</div>

css-

.test{
    background: yellow;
    padding:10px;
    display:block;
    font-family: tahoma;
    text-align:center;
    width:100px;
    font-weight:bold;
    clear: both;
}
.test2{
    width:100px;
    height:0px;
    text-align:center;
    font-size:12px;
    font-family: tahoma;
    color:#fff;
    font-weight:bold;
    padding:10px;
    opacity:0;
    float:left;
    overflow:hidden;
    background:red;
    -webkit-transition: all 0.7s ease;
    -moz-transition: all 0.7s ease;
    -ms-transition: all 0.7s ease;
    -o-transition: all 0.7s ease;
    transition: all 0.7s ease;
}
#test1:checked + .test2{
    height: 70px;
    opacity:1;
}
#test1{
    display:none;
}

【讨论】：

这不是我要找的
复选框的使用很好！
@RohitAgrawal - 实际上你的例子是一个非常好的纯 CSS 手风琴菜单：jsfiddle.net/C8Nn5 如果我能“接受”这个答案，我会的！唯一的问题是 div 的固定高度，因为您无法转换到 height: auto;。

【解决方案3】：

如果有帮助，我已将 Rohit 的答案改编为导航标签内的手风琴菜单，每个 div 都有内容：请参阅JSFiddle。

对于纯 CSS 版本，div 的固定高度是必需的，这是一个问题 - 你不能使用 height: auto;。

【讨论】：

【解决方案4】：

您可以通过使用顶部填充/边距获得类似于幻灯片过渡的感觉：

http://jsbin.com/bicoseroze/1/

【讨论】：