Javascript两个窗口.点击功能冲突
Javascript two window.onlick functions clashing
我使用几个下拉框与下面的脚本,一切工作除了点击窗口外,这只会在最后一个按钮上工作,我知道有一种方法来分离窗口。onclick功能,但我不确定如何,已经尝试了一些事情,但无法找到关于这个的很多信息。
任何帮助将非常感激!
<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction20() {
document.getElementById("myDropdown20").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event20) {
if (!event.target.matches('.dropbtn20')) {
var dropdowns20 = document.getElementsByClassName("dropdown-content20");
var i;
for (i = 0; i < dropdowns20.length; i++) {
var openDropdown20 = dropdowns20[i];
if (openDropdown20.classList.contains('show')) {
openDropdown20.classList.remove('show');
}
}
}
}
</script>
<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction21() {
document.getElementById("myDropdown21").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event21) {
if (!event.target.matches('.dropbtn21')) {
var dropdowns21 = document.getElementsByClassName("dropdown-content21");
var i;
for (i = 0; i < dropdowns21.length; i++) {
var openDropdown21 = dropdowns21[i];
if (openDropdown21.classList.contains('show')) {
openDropdown21.classList.remove('show');
}
}
}
}
</script>
当点击按钮外部并下拉时,右边的会关闭,但左边的不会。https://jsfiddle.net/c94gLhqm/
上面评论聊天的结果。为了清楚起见,在这里添加。在HTML
中引入了onblur/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
function myFunction2() {
document.getElementById("myDropdown2").classList.toggle("show");
}
.dropbtn {
background-color: #85c445;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
width: 170px;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #3e8e41;
}
.dropdown {
position: relative;
display: inline-block;
z-index: 6
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
font-size: 16px;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #f1f1f1}
.show {display:block;}
.dropbtn2 {
background-color: #85c445;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
width: 170px;
}
.dropbtn2:hover, .dropbtn2:focus {
background-color: #3e8e41;
}
.dropdown2 {
position: relative;
display: inline-block;
z-index: 6
}
.dropdown-content2 {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content2 a {
color: black;
font-size: 16px;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown2 a:hover {background-color: #f1f1f1}
.show {display:block;}
<div class="dropdown">
<button onblur="myFunction()" onclick="myFunction()" class="dropbtn">Example</button>
<div id="myDropdown" class="dropdown-content">
<a href="">1</a>
<a href="">2</a>
<a href="">3</a>
<a href="">4</a>
<a href="">5</a>
</div>
</div>
<div class="dropdown2">
<button onblur="myFunction2()" onclick="myFunction2()" class="dropbtn2">Example</button>
<div id="myDropdown2" class="dropdown-content2">
<a href="">1</a>
<a href="">2</a>
<a href="">3</a>
<a href="">4</a>
<a href="">5</a>
</div>
</div>
我想改变一下你的onclick方法
<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction20() {
document.getElementById("myDropdown20").classList.toggle("show");
}
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction21() {
document.getElementById("myDropdown21").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event20) {
if (!event.target.matches('.dropbtn20')) {
var dropdowns20 = document.getElementsByClassName("dropdown-content20");
var i;
for (i = 0; i < dropdowns20.length; i++) {
var openDropdown20 = dropdowns20[i];
if (openDropdown20.classList.contains('show')) {
openDropdown20.classList.remove('show');
}
}
} else if (!event.target.matches('.dropbtn21')) {
var dropdowns21 = document.getElementsByClassName("dropdown-content21");
var i;
for (i = 0; i < dropdowns21.length; i++) {
var openDropdown21 = dropdowns21[i];
if (openDropdown21.classList.contains('show')) {
openDropdown21.classList.remove('show');
}
}
}
}
</script>
相关文章:
- 添加文字和评论功能更新Div
- JavaScript打印功能使日历停止工作
- 每当您在选择器内移动鼠标时,悬停功能就会重复
- 如何防止网页加载后自动启动功能
- 除修剪外的其他功能
- 悬停功能触发器
- 使用angularjs向浏览器发送servlet响应(下载功能)
- 删除CKEditor工具栏按钮,但不删除功能
- 异步facebook功能
- jQuery插件与其他基本的显示/隐藏功能冲突
- 悬停/鼠标悬停功能冲突
- 两个相同的元素需要执行相同的功能,但存在冲突
- 链接单击上的Javascript和Jquery无冲突功能
- 定时功能和用户启动功能之间的冲突
- 由于滚动冲突,JQuery在单击或模糊、停止或终止功能时进行查询
- jQuery表单验证与邮件检查功能冲突
- 锚点过渡与标签引导点击功能冲突
- JavaScript使对象一个全局窗口对象?(无冲突功能)
- jQuery的灯箱功能和砌体/无尽滚动之间的冲突
- Javascript两个窗口.点击功能冲突