Question

我想在点击.search课程时显示输入字段.icon。我已设法使用以下代码执行此操作。然而，我想通过平滑地扩展其宽度来显示输入字段，而不是显示/隐藏。

如何做到这一点？

JSFiddle演示：

HTML：

<div class="box">
    <input class="search" type="search" placeholder="Search" />
     <div class="icon"></div>  
</div>

CSS：

.box{
    position: relative;
    width: 220px;
}

.search {    
    width: 200px;
    padding: 5px;
      -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    transition: all .5s ease;
    float: left;
}


.icon{
    width: 20px;
    height: 20px;
    background: red; 
    position: absolute; 
    right: 0;
}

JS：

$('.icon').click(function() {
    $('.search').toggle();
});

Answer 1

为什么不更改代码以切换类，从而在功能（JS）和样式（CSS）之间保持清晰的分离

下面是一些示例代码，您可能希望根据您的确切需求进行编辑。

Demo Fiddle

JS

$('.icon').click(function() {
    $('.search').toggleClass('expanded');
});

CSS

 .box {
    position: relative;
    width: 220px;
}
.search {
    width: 200px;
    max-width:0;
    padding: 5px;
    transition: all .5s ease;
    position:absolute;
    right:20px;
    box-sizing:border-box;
    opacity:0;
}
.search.expanded {
    max-width:200px;
    opacity:1;
}
.icon {
    width: 20px;
    height: 20px;
    background: red;
    position: absolute;
    right: 0;
}

Answer 2

您应该使用.slideToggle()或fadeToggle()

$('.icon').click(function() {
    $('.search').slideToggle(500);
});

单击可平滑扩展输入字段宽度

2 个答案:

Demo Fiddle