資訊專欄INFORMATION COLUMN
摘要：點擊任意非本身元素，指定元素隱藏在實際開發(fā)過程中經(jīng)常遇到如下問題鼠標(biāo)經(jīng)過下拉框顯示隱藏，例如導(dǎo)航下拉鼠標(biāo)點擊下拉框顯示，鼠標(biāo)點擊其它任意元素，下拉框隱藏。
點擊任意非本身元素，指定元素隱藏
在實際開發(fā)過程中經(jīng)常遇到如下問題：
1.鼠標(biāo)經(jīng)過下拉框顯示隱藏，例如導(dǎo)航下拉
2.鼠標(biāo)點擊下拉框顯示，鼠標(biāo)點擊其它任意元素，下拉框隱藏。
第一種方法非常容易實現(xiàn)，但是第二種方法就非常的頭疼了，為此將介紹兩種方案解決第二個問題。
jQuery代碼：
$("span").click(function(){
$("ul").show();
})
$(document).click(function(){
$("ul").hide();
})
//div為指定的“觸發(fā)下拉控件”
//如果“觸發(fā)下拉控件”和指定的顯示隱藏元素不是上下級別關(guān)系，也需要對顯示隱藏元素阻止冒泡
$("div").click(function(){
return false;
})
html布局：
弊端：
html文檔中有其它元素是阻止冒泡的，那么這種做法是不能完全達到預(yù)期效果的。
任意一個元素點擊都需要觸發(fā)div的隱藏，這種做法非常消耗資源。
設(shè)想：如果div也能像input文本框那樣有焦點屬性，這種問題是不是迎刃而解?!
二、如何讓div擁有焦點屬性增加tabindex，修改html如下：
jQuery寫法如下：
$("div").focus(function(){
$("ul").show();
}).blur(function(){
$("ul").hide();
})
優(yōu)點：
占用資源少
方法實現(xiàn)容易理解
兼容性好
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/91429.html
摘要：點擊任意非本身元素，指定元素隱藏在實際開發(fā)過程中經(jīng)常遇到如下問題鼠標(biāo)經(jīng)過下拉框顯示隱藏，例如導(dǎo)航下拉鼠標(biāo)點擊下拉框顯示，鼠標(biāo)點擊其它任意元素，下拉框隱藏。 點擊任意非本身元素，指定元素隱藏 在實際開發(fā)過程中經(jīng)常遇到如下問題：1.鼠標(biāo)經(jīng)過下拉框顯示隱藏，例如導(dǎo)航下拉2.鼠標(biāo)點擊下拉框顯示，鼠標(biāo)點擊其它任意元素，下拉框隱藏。第一種方法非常容易實現(xiàn)，但是第二種方法就非常的頭疼了，為此將介紹兩...
摘要：點擊任意非本身元素，指定元素隱藏在實際開發(fā)過程中經(jīng)常遇到如下問題鼠標(biāo)經(jīng)過下拉框顯示隱藏，例如導(dǎo)航下拉鼠標(biāo)點擊下拉框顯示，鼠標(biāo)點擊其它任意元素，下拉框隱藏。 點擊任意非本身元素，指定元素隱藏 在實際開發(fā)過程中經(jīng)常遇到如下問題：1.鼠標(biāo)經(jīng)過下拉框顯示隱藏，例如導(dǎo)航下拉2.鼠標(biāo)點擊下拉框顯示，鼠標(biāo)點擊其它任意元素，下拉框隱藏。第一種方法非常容易實現(xiàn)，但是第二種方法就非常的頭疼了，為此將介紹兩...
摘要：背景之前做了一個網(wǎng)頁，網(wǎng)頁中的所有輸入框都被設(shè)計為獲得鼠標(biāo)焦點時外邊框不變藍。而且輸入框的邊框設(shè)置在了父元素上，所有當(dāng)輸入框獲得焦點時，看到的應(yīng)該是父元素上的邊框變藍，而不是里面的的邊框變藍。 背景 之前做了一個網(wǎng)頁，網(wǎng)頁中的所有輸入框都被設(shè)計為獲得鼠標(biāo)焦點時外邊框不變藍。突然某一天，產(chǎn)品覺得這樣用戶體驗不好，不能很明顯地告訴用戶當(dāng)前鼠標(biāo)停在哪里，于是要求改為當(dāng)輸入框獲得鼠標(biāo)焦點時，外...
摘要：背景之前做了一個網(wǎng)頁，網(wǎng)頁中的所有輸入框都被設(shè)計為獲得鼠標(biāo)焦點時外邊框不變藍。而且輸入框的邊框設(shè)置在了父元素上，所有當(dāng)輸入框獲得焦點時，看到的應(yīng)該是父元素上的邊框變藍，而不是里面的的邊框變藍。 背景 之前做了一個網(wǎng)頁，網(wǎng)頁中的所有輸入框都被設(shè)計為獲得鼠標(biāo)焦點時外邊框不變藍。突然某一天，產(chǎn)品覺得這樣用戶體驗不好，不能很明顯地告訴用戶當(dāng)前鼠標(biāo)停在哪里，于是要求改為當(dāng)輸入框獲得鼠標(biāo)焦點時，外...
閱讀 2960·2021-11-23 09:51
閱讀 3786·2021-11-22 15:29
閱讀 3244·2021-10-08 10:05
閱讀 1568·2021-09-22 15:20
閱讀 983·2019-08-30 15:56
閱讀 1081·2019-08-30 15:54
閱讀 741·2019-08-26 11:54
閱讀 2643·2019-08-26 11:32
