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