国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

用 :focus-within 實現(xiàn)純 CSS 下拉框組件

focusj / 2579人閱讀

摘要:借用的例子當(dāng)點擊表單中的文本框時需高亮整個表單元素。但是表單內(nèi)部的文本框獲得焦點并不代表表單元素本身有焦點,所以使用并不能生效,這時就可以使用當(dāng)然這也是的其中一個典型用法。

:focus-within 偽類:當(dāng)本節(jié)點或其子節(jié)點獲得焦點時被激活。

借用 MDN 的例子

https://jsfiddle.net/d4w8h2ge/

當(dāng)點擊表單中的文本框時需高亮整個表單元素。但是表單內(nèi)部的文本框獲得焦點并不代表表單元素本身有焦點,所以使用 form:focus 并不能生效,這時就可以使用 :focus-within

當(dāng)然這也是 :focus-within 的其中一個典型用法。

使用普通的綁定 click 事件的方式實現(xiàn)下拉框組件

回到正題,這是一個使用 JS 實現(xiàn)的下拉框:https://jsfiddle.net/omo6cov2/1/

為了實現(xiàn)這個下拉框,你通常(*)需要綁定兩個 click 事件:一個在 a 標(biāo)簽上用于打開下拉框;一個在 body 上用于關(guān)閉下拉框。在 bodyclick 事件處理函數(shù)里,你得判斷事件不能是來自下拉框內(nèi)部的點擊。你還得記得在移除下拉框(例如單頁程序切換路由)時移除這個事件。

還有兩個問題:

由于在 body 上綁定了事件,在下拉框關(guān)閉時也會觸發(fā),造成不必要的開銷。

如果頁面被嵌在 iframe 內(nèi),點擊 iframe 外部元素不會觸發(fā) iframe 內(nèi)部的 click 事件,所以無法通過點擊 iframe 外部關(guān)閉下拉框。

使用 :focus-within 實現(xiàn)下拉框組件

這是一個使用 :focus-within 實現(xiàn)下拉框組件:https://jsfiddle.net/2vnn7fa4/1/

原理:點擊鏈接時,a 元素獲得焦點,激活了父元素的 :focus-within

除了把 .dropdown:not(.open) 改為 .dropdown:not(:focus-within) 外,還有一個要點:ul 標(biāo)簽本身(及其父元素們都)不能獲得焦點,所以點擊下拉框內(nèi)部時默認(rèn)會把整個文檔的焦點清除。解決方法很簡單:給 ul 標(biāo)簽添加 tabindex 屬性即可。

另外:Chrome 的 devtool 里有一項 Force state -> :focus-within,調(diào)樣式時不要忘了選

瀏覽器支持率,edge 需要加把勁了

(*):當(dāng)然如果你非要把 a 元素上的 click 事件放入 document 的 click 事件里處理我也沒意見。

文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/52377.html

相關(guān)文章

  • :focus-within 實現(xiàn) CSS 下拉組件

    摘要:借用的例子當(dāng)點擊表單中的文本框時需高亮整個表單元素。但是表單內(nèi)部的文本框獲得焦點并不代表表單元素本身有焦點,所以使用并不能生效,這時就可以使用當(dāng)然這也是的其中一個典型用法。 :focus-within 偽類:當(dāng)本節(jié)點或其子節(jié)點獲得焦點時被激活。 借用 MDN 的例子 https://jsfiddle.net/d4w8h2ge/ 當(dāng)點擊表單中的文本框時需高亮整個表單元素。但是表單內(nèi)部的文...

    崔曉明 評論0 收藏0
  • FE.CSS-Sultana后記:css也能寫col,select,datepicker,caro

    摘要:接著只要在中使用就能搞定自適應(yīng)。代碼如下標(biāo)題標(biāo)題標(biāo)題標(biāo)題標(biāo)題在上述點功能中,可以用變量解決,比如實現(xiàn)了寬度,高度圓點大小直徑的控件。 未完待續(xù) 背景 如今css3越來越發(fā)達(dá),focus-within等屬性也已經(jīng)開始在Chrome得到支持。如果有出色的css功底,一點點ps技能,你也能用css3配合原生html標(biāo)簽寫出優(yōu)秀的框架。通過對css3的實踐,我發(fā)現(xiàn)自定義原生控件并不是什么難事,...

    BigTomato 評論0 收藏0
  • FE.CSS-Sultana后記:css也能寫col,select,datepicker,caro

    摘要:接著只要在中使用就能搞定自適應(yīng)。代碼如下標(biāo)題標(biāo)題標(biāo)題標(biāo)題標(biāo)題在上述點功能中,可以用變量解決,比如實現(xiàn)了寬度,高度圓點大小直徑的控件。 未完待續(xù) 背景 如今css3越來越發(fā)達(dá),focus-within等屬性也已經(jīng)開始在Chrome得到支持。如果有出色的css功底,一點點ps技能,你也能用css3配合原生html標(biāo)簽寫出優(yōu)秀的框架。通過對css3的實踐,我發(fā)現(xiàn)自定義原生控件并不是什么難事,...

    lanffy 評論0 收藏0
  • FE.CSS-Sultana后記:css也能寫col,select,datepicker,caro

    摘要:接著只要在中使用就能搞定自適應(yīng)。代碼如下標(biāo)題標(biāo)題標(biāo)題標(biāo)題標(biāo)題在上述點功能中,可以用變量解決,比如實現(xiàn)了寬度,高度圓點大小直徑的控件。 未完待續(xù) 背景 如今css3越來越發(fā)達(dá),focus-within等屬性也已經(jīng)開始在Chrome得到支持。如果有出色的css功底,一點點ps技能,你也能用css3配合原生html標(biāo)簽寫出優(yōu)秀的框架。通過對css3的實踐,我發(fā)現(xiàn)自定義原生控件并不是什么難事,...

    張金寶 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<