我已经编写了以下 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.
});
});
最佳答案
是的,但您可能仍然需要一些 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,因为它非常简单,
根据我的经验,目标选择器在实践中并不是很好。
关于jquery - HTML & CSS3 向下滑动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16882770/