Jquery搜索框

我正在尝试创建一个响应性强的Jquery搜索框。 我正在尝试做的事情：

• 当窗口变小时，DIV应该折叠，搜索字段应该消失
• 折叠时，只要单击DIV，DIV就会展开，搜索字段就会出现。单击DIV或单击其他任何位置时，DIV就会再次折叠，搜索字段就会消失

我已经创建了一个JSFIDLE：

HTML:

Jquery：

$('.search').on('click', function() {
    $(this).toggleClass('clicked');
});

有两件事我不能去工作：

• 单击DIV时，搜索字段不显示
• 我是Jquery新手，在其他地方单击时找不到一个好的脚本来折叠DIV

---

我希望有人能帮我。谢谢

您的问题不是jQuery，而是CSS

将所有与搜索相关的内容移到样式表其余部分的下方。您的一些样式表导致此CSS出现问题。这是系统的级联部分

在媒体查询更改中：

.search.clicked > input[type="search"]{

到

因为

只选择

.search.clicked的直接子项

---

您的问题不是jQuery，而是CSS

将所有与搜索相关的内容移到样式表其余部分的下方。您的一些样式表导致此CSS出现问题。这是系统的级联部分

在媒体查询更改中：

.search.clicked > input[type="search"]{

到

因为

只选择

.search.clicked的直接子项

.search.clicked > input[type="search"]{

.search.clicked input[type="search"]{