摘要：点击任意非本身元素，指定元素隐藏在实际开发过程中经常遇到如下问题鼠标经过下拉框显示隐藏，例如导航下拉鼠标点击下拉框显示，鼠标点击其它任意元素，下拉框隐藏。
点击任意非本身元素，指定元素隐藏
在实际开发过程中经常遇到如下问题：
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();
})
优点：
占用资源少
方法实现容易理解
兼容性好
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/91429.html
摘要：点击任意非本身元素，指定元素隐藏在实际开发过程中经常遇到如下问题鼠标经过下拉框显示隐藏，例如导航下拉鼠标点击下拉框显示，鼠标点击其它任意元素，下拉框隐藏。 点击任意非本身元素，指定元素隐藏 在实际开发过程中经常遇到如下问题：1.鼠标经过下拉框显示隐藏，例如导航下拉2.鼠标点击下拉框显示，鼠标点击其它任意元素，下拉框隐藏。第一种方法非常容易实现，但是第二种方法就非常的头疼了，为此将介绍两...
摘要：点击任意非本身元素，指定元素隐藏在实际开发过程中经常遇到如下问题鼠标经过下拉框显示隐藏，例如导航下拉鼠标点击下拉框显示，鼠标点击其它任意元素，下拉框隐藏。 点击任意非本身元素，指定元素隐藏 在实际开发过程中经常遇到如下问题：1.鼠标经过下拉框显示隐藏，例如导航下拉2.鼠标点击下拉框显示，鼠标点击其它任意元素，下拉框隐藏。第一种方法非常容易实现，但是第二种方法就非常的头疼了，为此将介绍两...
摘要：背景之前做了一个网页，网页中的所有输入框都被设计为获得鼠标焦点时外边框不变蓝。而且输入框的边框设置在了父元素上，所有当输入框获得焦点时，看到的应该是父元素上的边框变蓝，而不是里面的的边框变蓝。 背景 之前做了一个网页，网页中的所有输入框都被设计为获得鼠标焦点时外边框不变蓝。突然某一天，产品觉得这样用户体验不好，不能很明显地告诉用户当前鼠标停在哪里，于是要求改为当输入框获得鼠标焦点时，外...
摘要：背景之前做了一个网页，网页中的所有输入框都被设计为获得鼠标焦点时外边框不变蓝。而且输入框的边框设置在了父元素上，所有当输入框获得焦点时，看到的应该是父元素上的边框变蓝，而不是里面的的边框变蓝。 背景 之前做了一个网页，网页中的所有输入框都被设计为获得鼠标焦点时外边框不变蓝。突然某一天，产品觉得这样用户体验不好，不能很明显地告诉用户当前鼠标停在哪里，于是要求改为当输入框获得鼠标焦点时，外...
阅读 2928·2021-11-23 09:51
阅读 3748·2021-11-22 15:29
阅读 3210·2021-10-08 10:05
阅读 1533·2021-09-22 15:20
阅读 921·2019-08-30 15:56
阅读 1029·2019-08-30 15:54
阅读 714·2019-08-26 11:54
阅读 2617·2019-08-26 11:32
