如何隐藏和显示其他元素，如Stackoverflow.com搜索栏等其他元素？

Question

我正在创建一个网站，其名称和电子邮件的输入框的大小不是因为设计而

所以我想知道如何隐藏其他元素：焦点并在失焦后再次回来

喜欢这个

我想同时关注鼠标和键盘

修改

我在Stackoverflow.com

的Seach栏中看到了我想要的效果

他们的表现如何？

Answer 1

http://jsfiddle.net/tBQpB/6/

纯pss中的

：

.wrapper{
    width:400px;
    position:relative
}
input{
    position:relative;
    z-index:1;
}
input:focus{
    position:absolute;
    z-index:2;
    width:400px;
    float:left;
    left:0px
}

和html：

<div class="wrapper">
        <input type="text" id="name" name="name" />

        <input type="text" id="email" name="email" />
</div>

Answer 2

我在jsFiddle中为这个问题写了一些代码......

检查出来：http://jsfiddle.net/ycdrR/1/

更新：http://jsfiddle.net/ycdrR/4/

Answer 3

你可以在像

这样的javascript中尝试一些东西

$("input").focus(function()
                 {
                     var currentSelectedInput=this;

                     $("input").each(function()
                                     {
                                     if(this!=currentSelectedInput)
                                         $(this).parent().hide();
                                     });
                     $(this).css("width","100%");
                 });

$("input").blur(function(){
    $("input").each(function()
                                     {
                                         if($(this).parent().is(":visible")){
                                             $(this).css("width","auto");
                                         }
                                         else{
                                         $(this).parent().show();
                                         }
                                     });
                 });

使用jquery进行上述操作，标记如下：

<div style="width="500px">
<div id="name" style="float:left">

    Name:
    <input  type="textbox" />
        </div>
    <div id="email" style="right">      
Email:
            <input type="textbox" />
    </div>
</div>