实现这个效果的大概思路是怎样的？

Question

本帖最后由 u010703975 于 2014-12-31 15:32:00 编辑

Answer 1

a b（b是input）a点击后  a消失   b显示 b接受  focu方法b的blur事件  b消失  a显示

Answer 2

onclick  显示隐藏的文本框
文本框 onblur 隐藏 显示图片

Answer 3

其实我已开始就是这样的 
可能是css没有写好 效果巨丑 而且我点别的地方的时候 无法还原

Answer 4

其实我已开始就是这样的 
可能是css没有写好 效果巨丑 而且我点别的地方的时候 无法还原body添加一个click事件  如果事件的 源对象不是b  那么 a显示  b消失
双保险把

Answer 5

其实我已开始就是这样的 
可能是css没有写好 效果巨丑 而且我点别的地方的时候 无法还原body添加一个click事件  如果事件的 源对象不是b  那么 a显示  b消失
双保险把   $('#search-icon').click(function() {
        $(this).css({
            'display': 'none'
        });
        $('.search-field').show('slow');
    });      $('body').click(function() {
            var $this = $('this');
            if (!$this.is($('#search-icon'))) {
                $('.search-field').hide();
                $('#search-icon').show();
            }
        });我像这样写的 如果只有第一个click可以正常的运行 
但是添加了第二个之后 就没有反应了 也不报错
求指点

Answer 6

<div id="site-search" class="header-search">
      <form role="search" method="get" class="search-form" action="??">
            <label>
                 <span id='search-icon' class="glyphicon glyphicon-search "></span>
                 <input type="search" class="search-field" placeholder="搜索 ..."  name="s" title="Search for:">
            </label>
       </form>
 </div>
var main = function() {
    $('#search-icon').click(function() {
        $(this).css({
            'display': 'none'
        });
        $('.search-field').show('slow');
    });      $('body').click(function() {
            var $this = $('this');
            if (!$this.is($('#search-icon'))) {
                $('.search-field').hide();
                $('#search-icon').show();
            }
        });};$(document).ready(main);
一开始只有search-icon显示 search-filed 与并排 但是隐藏了
当点击icon之后 icon小时 search-field 显示 
再点击其他地方时 search-field消失 icon显示