jquery - jQueryの切り替え/クリックが希望どおりに機能しない

Question

http://codepen.io/KyleMorgan49/full/ELqurで私のプロジェクトをチェックしてください

ボタンをクリックすると拡大します。しかし、それを閉じるためのいくつかの奇妙な理由のために、私はボックスの下部をクリックする必要があります。div＃search-iconが下に移動または縮小していると思いますが、それを実行するコードはありません。よくわかりません。これをいじってみてください。ありがとう！

Answer 1

これ#searchy-stuffは、アイコンの中央をカバーしているために発生します（下部だけでなく、上部をクリックして表示することもできます）

修正するには#searchy-stuff、入力フィールドと同じ幅にします

デモ

Answer 2

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

このセクションは、最初のアニメーションが完了した後、アイコンと重なります... cssを変更すると、機能します。実際には、アイコンを2回クリックすることはありません。

Answer 3

searchy-stuffが検索アイコンと重なっているため、クリックイベントはトリガーされません。

このcssを追加します：

#searchy-stuff{pointer-events:none}