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

資訊專欄INFORMATION COLUMN

用 :focus-within 實現純 CSS 下拉框組件

focusj / 2590人閱讀

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

:focus-within 偽類：當本節點或其子節點獲得焦點時被激活。

借用 MDN 的例子

https://jsfiddle.net/d4w8h2ge/

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

當然這也是 :focus-within 的其中一個典型用法。

使用普通的綁定 click 事件的方式實現下拉框組件

回到正題，這是一個使用 JS 實現的下拉框：https://jsfiddle.net/omo6cov2/1/

為了實現這個下拉框，你通常(*)需要綁定兩個 click 事件：一個在 a 標簽上用于打開下拉框；一個在 body 上用于關閉下拉框。在 body 的 click 事件處理函數里，你得判斷事件不能是來自下拉框內部的點擊。你還得記得在移除下拉框（例如單頁程序切換路由）時移除這個事件。

還有兩個問題：

由于在 body 上綁定了事件，在下拉框關閉時也會觸發，造成不必要的開銷。

如果頁面被嵌在 iframe 內，點擊 iframe 外部元素不會觸發 iframe 內部的 click 事件，所以無法通過點擊 iframe 外部關閉下拉框。

使用 :focus-within 實現下拉框組件

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

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

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

另外：Chrome 的 devtool 里有一項 Force state -> :focus-within，調樣式時不要忘了選

完

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

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/52377.html

相關文章

  • 用 :focus-within 實現純 CSS 下拉框組件

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

    崔曉明 評論0 收藏0

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

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

    BigTomato 評論0 收藏0

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

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

    lanffy 評論0 收藏0

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

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

    張金寶 評論0 收藏0

發表評論

0條評論

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