最近在做一個學校網站的項目，在這個項目中我用到了兩種不同的搜索欄的樣式，一起來分享一下。
1.首先第一種，這種可以使用css來完成，我們首先設置普通狀態下的搜索框邊框顏色為白色，且寬度較低，就能實現左圖樣式，然后當搜索欄獲得焦點時，使用:focus修改搜索框寬度和邊框顏色，加上動畫效果就能實現
2.第二種則需要依靠jq，我們現在的文匯官網也是使用本搜索框。在默認狀態下，以單icon的形式出現，當我們點擊icon時，就會出現搜索框。該搜索框思路為，首先使用css隱藏搜索框和定位，定位到icon旁隱藏，然后我們使用jq。
jq和html代碼如下：點擊icon時判斷搜索框是否隱藏，隱藏則顯示，顯示則隱藏，點擊其他任意處時隱藏搜索框，stopPropagation是為了阻止事件冒泡
關于其他jq的小技巧點擊這里。
上一篇： vue3中的全局事件總線
下一篇： 迅睿cms的表單提交
