最近在做一個(gè)學(xué)校網(wǎng)站的項(xiàng)目，在這個(gè)項(xiàng)目中我用到了兩種不同的搜索欄的樣式，一起來(lái)分享一下。
1.首先第一種，這種可以使用css來(lái)完成，我們首先設(shè)置普通狀態(tài)下的搜索框邊框顏色為白色，且寬度較低，就能實(shí)現(xiàn)左圖樣式，然后當(dāng)搜索欄獲得焦點(diǎn)時(shí)，使用:focus修改搜索框?qū)挾群瓦吙蝾伾由蟿?dòng)畫(huà)效果就能實(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中的全局事件總線(xiàn)
下一篇： 迅睿cms的表單提交
開(kāi)啟了相對(duì)路徑模式，本地址是站外域名，不能轉(zhuǎn)為相對(duì)路徑（在關(guān)閉開(kāi)發(fā)者模式后不顯示這句話(huà)） "濟(jì)南建站手術(shù)移動(dòng)護(hù)理系統(tǒng)詳細(xì)流程(千佛山醫(yī)院版）")
開(kāi)啟了相對(duì)路徑模式，本地址是站外域名，不能轉(zhuǎn)為相對(duì)路徑（在關(guān)閉開(kāi)發(fā)者模式后不顯示這句話(huà)） "濟(jì)南建站手術(shù)移動(dòng)護(hù)理系統(tǒng)")
開(kāi)啟了相對(duì)路徑模式，本地址是站外域名，不能轉(zhuǎn)為相對(duì)路徑（在關(guān)閉開(kāi)發(fā)者模式后不顯示這句話(huà)） "濟(jì)南建站紅寶書(shū)智慧黨建平臺(tái)")
