Javascript 转换不起作用

所以我现在在我的页面上有一些JQuery，它允许用户点击一个按钮，反过来，它会打开一个搜索框。然而，我希望我的搜索框能慢慢地滑动打开，而不是现在突然打开。所以我在CSS中为2个类添加了一个转换，但它们不想工作

这是我的HTML：

<form class="ngen-search-form form-search" action="search" method="get">
    <input type="text" name="q" id="search-input" class="form-search-input" placeholder="Search for games..." dir="ltr">
    <input type="text" onclick="expandSearch()" readonly="readonly" class="form-search-submit" value="&#x1f50e;">
</form>

和JQuery：

function expandSearch(){
            $('#search-input').toggleClass('search-input-open');
        }

有没有关于它如何不起作用的想法

谢谢

试试这个：

.form-search-input{
    width:0px;
    height:55px;
    border: 0;
    outline: 0;
    font-size:21px; 
    padding: 0px 0px 0px 0px;
    color: #151515;
    transition: all 0.5s;
}

.form-search-submit{
    display:inline-block;
    width:55px;
    height:45px;
    border: 0;
    outline: 0;
    background-color:#151515;
    font-size:21px;
    color: white;
    cursor: pointer;
    text-align:center;
}

.search-input-open{
    width:410px;
    padding: 0px 0px 0px 20px;
}

试试这个：

.form-search-input{
    width:0px;
    height:55px;
    border: 0;
    outline: 0;
    font-size:21px; 
    padding: 0px 0px 0px 0px;
    color: #151515;
    transition: all 0.5s;
}

.form-search-submit{
    display:inline-block;
    width:55px;
    height:45px;
    border: 0;
    outline: 0;
    background-color:#151515;
    font-size:21px;
    color: white;
    cursor: pointer;
    text-align:center;
}

.search-input-open{
    width:410px;
    padding: 0px 0px 0px 20px;
}

---

您应该只需要jQuery就可以做到这一点。 请看一下显示/隐藏功能以及幻灯片功能

---

如果您想平稳地打开和关闭它，您可能需要使用slideToggle（）函数，您应该只需使用jQuery就可以做到这一点。 请看一下显示/隐藏功能以及幻灯片功能

---

如果您想平稳地打开和关闭它，您可能需要slideToggle（）函数

您可以为此制作小提琴吗？当然可以！请稍等@ParthTrivedi如何将

单击
事件设置为
只读
？@ParthTrivedi对不起？您已在
只读
元素上设置了
expandSearch（）
。它从不执行
点击
。你能为它做小提琴吗？当然！请稍等@ParthTrivedi如何将
单击
事件设置为
只读
？@ParthTrivedi对不起？您已在
只读
元素上设置了
expandSearch（）
。它从不执行
单击
。谢谢！这就是它所需要的！谢谢你！这就是它所需要的！