jquery - HTML & CSS3 向下滑动

Question

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

http://jsbin.com/exakuj/5

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.
  });
});

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

这里有几点:

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

如果我这样做，我会使用这里的内容，但我会使用 JS 向 #show 添加一个名为“active”的类，并更改 #show:target 到 #show.active。

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

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

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