成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

focusj / 2615人閱讀

摘要：借用的例子當(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 標簽上用于打開下拉框；一個在 body 上用于關(guān)閉下拉框。在 body 的 click 事件處理函數(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 標簽本身（及其父元素們都）不能獲得焦點，所以點擊下拉框內(nèi)部時默認會把整個文檔的焦點清除。解決方法很簡單：給 ul 標簽添加 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://systransis.cn/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)。代碼如下標題標題標題標題標題在上述點功能中，可以用變量解決，比如實現(xiàn)了寬度，高度圓點大小直徑的控件。 未完待續(xù) 背景 如今css3越來越發(fā)達，focus-within等屬性也已經(jīng)開始在Chrome得到支持。如果有出色的css功底，一點點ps技能，你也能用css3配合原生html標簽寫出優(yōu)秀的框架。通過對css3的實踐，我發(fā)現(xiàn)自定義原生控件并不是什么難事，...

    BigTomato 評論0 收藏0

  • FE.CSS-Sultana后記：純css也能寫col,select,datepicker,caro

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

    lanffy 評論0 收藏0

  • FE.CSS-Sultana后記：純css也能寫col,select,datepicker,caro

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

    張金寶 評論0 收藏0

發(fā)表評論

0條評論

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