Question

尊敬的人......

我正在处理我应用的搜索组件......

input{
    display:none;
    width:0px;
    color:#999;
}

最初我只是有一个搜索框，所以当前的功能是为了....但现在要求就是这样......

文本框应该是隐藏的，应该出现然后展开，点击搜索图标...（尝试显示：无，点击芽对我没有用）...

非常感谢......

此致

Answer 1

假设这是你想要的......

使用图标的点击事件切换文本框...其余代码

 $('#searchinout').find('i').click(function(){
    $('#expandbox').toggle('slow');
});

这是你的CSS

#expandbox{
  display:none;
}

fiddle here

Answer 2

$(document).ready(function () {

//hide the textbox on document ready
$("#txtSearch").hide();

//make it visble on search icon click
$(".Search").click(function () {
$("#txtSearch").show();
});

});

或者您可以将textbox的display属性设置为none，并在icon click（）事件上将其设置为bloock。

Answer 3

您可以尝试以下代码。

input{
    width:0px;
    color:#999;
    opacity:0;
}

var inputWdith = '200px';
var inputWdithReturn = '0px';   

$(document).ready(function() {
  $('.icon-search').click(function(){
    //animate the box
    $('#expandbox').animate({
      width: inputWdith,
      opacity: 1
    }, 800 )
    $('#expandbox').focus();
  }); 

  $('#expandbox').blur(function(){
    $(this).animate({
      width: inputWdithReturn,
      opacity: 0
    }, 800 )

  });
});

使用jQuery .animate搜索框动画

3 个答案: