1

我在下面创建了 jQuery 脚本,但是在将其转换为最好仅使用转换的 CSS 时遇到了一些问题。如果有人可以帮助我,我会很高兴的。

下面的示例说明:
- 当您单击文本框时,一个空的 div 容器会下拉,但我在编写脚本时遇到了一些问题,主要是 CSS3 过渡。

HTML:

<div class="div">
    <input type="text" class="textbox" id="textbox"/>
    <p>example</p>
</div>

CSS:

.textbox {width:300px;}
.div { width:300px; background-color:#f8f8f8; }
p {width:300px; height:300px; background-color: #f8f8f8;}

jQuery:

$("#textbox").click(function() {
    $("p").slideToggle();
});

现场演示:jsFiddle

4

1 回答 1

1
p {
    height: 0;
    overflow: hidden;
    transition: height .3s;
}
input:focus + p {
    height: 20px;
}

这是你的小提琴:http: //jsfiddle.net/58VHE/33/(点击关注input)。


PS不要忘记供应商前缀。小提琴用于-prefix-free自动添加供应商前缀。

于 2012-08-19T21:11:05.977 回答