jQuery 如何展开和折叠表单字段答案

【问题标题】：jQuery How to Expand AND Collapse Form FieldjQuery 如何展开和折叠表单字段
【发布时间】：2014-10-08 08:48:37
【问题描述】：

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

【问题讨论】：

标签： javascript jquery html forms jquery-animate

【解决方案1】：

$(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

【讨论】：

一些修改，但如果有人想在未来看到，这是我的最终产品：jsfiddle.net/phamousphil/4jw42kza

【解决方案2】：

您可以通过切换“扩展”类并使用 CSS3 处理动画（和可见性）来轻松实现它：

CSS：

.header-search-box {
   visibility: hidden;
   width: 0;
   transition: all 0.3s ease;
}

.expanded {
   visibility: visible;
   width: 100px;
}

JS：

$(function(){
   var mglass = $('.magnifying-glass');
   var form = $('.header-search-box');

   mglass.click(function(){
      form.toggleClass('expanded');
   });

});

在这里提琴：http://jsfiddle.net/8rLmokp1/

【讨论】：