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