目标功能是通过单击小提琴(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/

10-12 01:09
查看更多