jquery - jQuery 切换/单击无法按我想要的方式工作

Question

在http://codepen.io/KyleMorgan49/full/ELqur查看我的项目

当我单击按钮时，它会展开。但是由于某些奇怪的原因关闭它，我必须单击框的底部。我认为 div#search-icon 正在向下移动或缩小，但我没有任何代码可以做到这一点。我很困惑。你能花点时间玩这个吗？谢谢！

Answer 1

发生这种情况是因为您#searchy-stuff覆盖了图标的中间（您也可以单击顶部，而不仅仅是底部来查看它）

要修复它，使其#searchy-stuff与输入字段的宽度相同

演示

Answer 2

searchy-stuff 与您的搜索图标重叠，因此不会触发点击事件。

添加这个CSS：

#searchy-stuff{pointer-events:none}

Answer 3

<p id="searchy-stuff" style="display: block;">
    <input type="text" id="search-input">
</p>

在第一个动画完成后，此部分与图标重叠...更改您的 css 它将起作用。实际上没有第二次点击图标。