目标功能是通过单击小提琴(http://jsfiddle.net/phamousphil/4jw42kza/)中看到的图像来展开和折叠表单字段。目前,我已经使用.animate()
进行扩展工作,但是经过反复摆弄之后,我找不到崩溃的方法。
我的问题是双重的:
1.单击图像时,如何实现相反的动画以折叠表单?
2.(奖励)折叠后,如何使用.animate()
来利用CSS visibility
完全隐藏表单?我尝试执行此操作失败。
代码如下:
HTML:
<input class='header-search-box' type='text' id='search-string' name='search-string'>
<img src=' http://findicons.com/files/icons/974/glyphish/18/magnifying_glass.png' class='magnifying-glass' />
CSS:
.header-search-box {
}
.header-search-box {
width: 0px;
}
.magnifying-glass {
}
JavaScript:
$(function(){
var mglass = $('.magnifying-glass');
var form = $('.header-search-box');
mglass.click(function(){
form.animate({'width': '100px'}, 'slow');
});
});
最佳答案
$(function () {
var mglass = $('.magnifying-glass');
var form = $('.header-search-box');
mglass.click(function () {
if (form.is(':hidden')) form.show()
form.animate({
'width': form.width() == 100 ? '0px' : '100px'
}, 'slow', function () {
if (form.width() == 0) form.hide()
});
});
});
jsFiddle example
关于javascript - jQuery如何展开和折叠表单字段,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/25312492/