jQuery切换/点击不按我想要的方式工作

Question

在http://codepen.io/KyleMorgan49/full/ELqur

查看我的项目

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

Answer 1

这是因为您的#searchy-stuff覆盖了图标的中间位置（您也可以点击最顶部，而不仅仅是底部才能看到它）

要修复此问题，请使#searchy-stuff与输入字段的宽度相同

DEMO

Answer 2

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

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

Answer 3

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

添加此css：

#searchy-stuff{pointer-events:none}