摘要:點擊任意非本身元素,指定元素隱藏在實際開發過程中經常遇到如下問題鼠標經過下拉框顯示隱藏,例如導航下拉鼠標點擊下拉框顯示,鼠標點擊其它任意元素,下拉框隱藏。
點擊任意非本身元素,指定元素隱藏
在實際開發過程中經常遇到如下問題:
1.鼠標經過下拉框顯示隱藏,例如導航下拉
2.鼠標點擊下拉框顯示,鼠標點擊其它任意元素,下拉框隱藏。
第一種方法非常容易實現,但是第二種方法就非常的頭疼了,為此將介紹兩種方案解決第二個問題。
jQuery代碼:
$("span").click(function(){ $("ul").show(); }) $(document).click(function(){ $("ul").hide(); }) //div為指定的“觸發下拉控件” //如果“觸發下拉控件”和指定的顯示隱藏元素不是上下級別關系,也需要對顯示隱藏元素阻止冒泡 $("div").click(function(){ return false; })
html布局:
弊端:
html文檔中有其它元素是阻止冒泡的,那么這種做法是不能完全達到預期效果的。
任意一個元素點擊都需要觸發div的隱藏,這種做法非常消耗資源。
設想:如果div也能像input文本框那樣有焦點屬性,這種問題是不是迎刃而解?!
二、如何讓div擁有焦點屬性增加tabindex,修改html如下:
jQuery寫法如下:
$("div").focus(function(){ $("ul").show(); }).blur(function(){ $("ul").hide(); })
優點:
占用資源少
方法實現容易理解
兼容性好
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/112427.html
摘要:點擊任意非本身元素,指定元素隱藏在實際開發過程中經常遇到如下問題鼠標經過下拉框顯示隱藏,例如導航下拉鼠標點擊下拉框顯示,鼠標點擊其它任意元素,下拉框隱藏。 點擊任意非本身元素,指定元素隱藏 在實際開發過程中經常遇到如下問題:1.鼠標經過下拉框顯示隱藏,例如導航下拉2.鼠標點擊下拉框顯示,鼠標點擊其它任意元素,下拉框隱藏。第一種方法非常容易實現,但是第二種方法就非常的頭疼了,為此將介紹兩...
摘要:點擊任意非本身元素,指定元素隱藏在實際開發過程中經常遇到如下問題鼠標經過下拉框顯示隱藏,例如導航下拉鼠標點擊下拉框顯示,鼠標點擊其它任意元素,下拉框隱藏。 點擊任意非本身元素,指定元素隱藏 在實際開發過程中經常遇到如下問題:1.鼠標經過下拉框顯示隱藏,例如導航下拉2.鼠標點擊下拉框顯示,鼠標點擊其它任意元素,下拉框隱藏。第一種方法非常容易實現,但是第二種方法就非常的頭疼了,為此將介紹兩...
摘要:背景之前做了一個網頁,網頁中的所有輸入框都被設計為獲得鼠標焦點時外邊框不變藍。而且輸入框的邊框設置在了父元素上,所有當輸入框獲得焦點時,看到的應該是父元素上的邊框變藍,而不是里面的的邊框變藍。 背景 之前做了一個網頁,網頁中的所有輸入框都被設計為獲得鼠標焦點時外邊框不變藍。突然某一天,產品覺得這樣用戶體驗不好,不能很明顯地告訴用戶當前鼠標停在哪里,于是要求改為當輸入框獲得鼠標焦點時,外...
摘要:背景之前做了一個網頁,網頁中的所有輸入框都被設計為獲得鼠標焦點時外邊框不變藍。而且輸入框的邊框設置在了父元素上,所有當輸入框獲得焦點時,看到的應該是父元素上的邊框變藍,而不是里面的的邊框變藍。 背景 之前做了一個網頁,網頁中的所有輸入框都被設計為獲得鼠標焦點時外邊框不變藍。突然某一天,產品覺得這樣用戶體驗不好,不能很明顯地告訴用戶當前鼠標停在哪里,于是要求改為當輸入框獲得鼠標焦點時,外...
閱讀 2706·2021-11-11 16:54
閱讀 2328·2021-10-09 09:44
閱讀 2547·2019-08-30 15:54
閱讀 1935·2019-08-30 11:24
閱讀 1174·2019-08-29 17:03
閱讀 2106·2019-08-29 16:22
閱讀 2086·2019-08-29 13:11
閱讀 1043·2019-08-29 12:14