Javascript 动画的问题

当点击.search_图标时，搜索宽度会增加或减少，因为在实际时刻，当我点击.search类时，它的大小会发生变化。有人能解释一下为什么这些代码不能与实际的jquery库版本一起使用，谢谢。

$background color:#2A2E37；
$search背景颜色：#242628；
$icon color:#00FEDE；
$transition：所有0.5s轻松；
.inp{
宽度：240px；
高度：60px；
盒影：无；
边界：无；
背景：透明；
颜色：#fff；
填充：20px 0px 20px 45px；
字体大小：40px；
&：焦点{
大纲：无；
}
}
.搜索{
宽度：100px；
高度：100px；
背景#3a3a；
过渡：所有0.7秒缓解；
利润率：50像素；
位置：绝对位置；
&.打开{
宽度：90%；
}
}
.search_图标{
宽度：34px；
高度：34px；
边界半径：40px；
边框：3倍纯色$图标颜色；
显示：块；
位置：相对位置；
利润上限：-77px；
左边距：20px；
过渡：过渡；
&：之前{
内容：''；
宽度：3倍；
高度：15px；
位置：绝对位置；
右：-2px；
顶部：30px；
显示：块；
背景颜色：$图标颜色；
变换：旋转（-45度）；
过渡：过渡；
}
&：之后{
内容：''；
宽度：3倍；
高度：15px；
位置：绝对位置；
右：-12px；
顶部：40px；
显示：块；
背景颜色：$图标颜色；
变换：旋转（-45度）；
过渡：过渡；
}
.公开及{
宽度：50px；
高度：50px；
边界半径：60px；
左缘：95%；
&：之前{
变换：旋转（45度）；
右：23px；
顶部：12px；
高度：29px；
}
&：之后{
变换：旋转（-45度）；
右：23px；
顶部：12px；
高度：29px；
}
}
}
$（函数（）{
$（'.search'）。在（'click'，function（）上{
$（this.toggleClass（'open'）；
$（this.toggleClass（'clicked'）；
});
});

您可以使用此选项：

$(function() {
    $('.search').on('click', function() { // Expand search on click on it
        $(this).addClass('open clicked');
    });

    $('.search_icon').on('click', function(e) { // Collapse search on click on search icon
        e.stopPropagation();
        $(this).closest('.search').removeClass('open clicked');
    });
});

---

哪一部分不能正常工作？搜索图标在单击时展开和折叠。预期的行为是什么？对，它在所有的div和span上都会折叠，但我希望它在上折叠。search_icon classi的意思是on。search_icon类单击显然，然后您需要将事件绑定到

$（'.search_icon'）

，而不是

$（'.search'）

您可以替换

$（this）。toggleClass（'open）$（this.toggleClass（'clicked'）$（this.toggleClass（'openclicked'）

现在它可以在js fiddle上使用，但我还没有：/你有jquery吗？你需要在左边的外部资源中添加jquery。您还必须将css从添加样式的窗格右上角的设置图标更改为SCS。这是一个更新了这些更改的版本，它将在JSFIDLE上运行，但在我的站点上如何运行，因为我不明白：/

$(function() {
    $('.search').on('click', function() { // Expand search on click on it
        $(this).addClass('open clicked');
    });

    $('.search_icon').on('click', function(e) { // Collapse search on click on search icon
        e.stopPropagation();
        $(this).closest('.search').removeClass('open clicked');
    });
});