我编写了代码以在移动设备上单击 div 外部时关闭菜单。它适用于 Android 手机,但不适用于 IOS 设备。
如果我点击切换栏,下拉菜单将打开,如果我点击菜单或在菜单外,div 菜单应该关闭。对于 Android 在 IOS 设备中遇到问题,它工作正常。
这是我添加的 javascript 代码。
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
<div class="container">
<nav class="navbar menu-bar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button onclick="myFunction()" type="button" class="navbar-toggle dropbtn" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="images/Bezelsoft.png" class="img-responsive"></a>
</div>
<div class="collapse navbar-collapse dropdown-content" id="myNavbar" >
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="index.html">HOME</a></li>
<li><a href="service.html">TECHNOLOGY SERVICES</a></li>
<li><a href="industries.html">INDUSTRIES</a></li>
<li><a href="carporate.html">CORPORATE</a></li>
<li><a href="resources.html">RESOURCES</a></li>
<li><a href="contact.html">CONTACT US</a></li>
</ul>
</div>
</div>
</nav>
</div>
最佳答案
body
的点击事件不适用于基于 safari 的设备。您可以创建一个可点击区域并将其设为 cusrsor: pointer
或另一种解决方案是使用 touchevents。
document.addEventListener('touchend', function(e){
// your event body here
}, false);
在你的代码中,它应该是:
document.addEventListener('touchend', function (event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
event.preventDefault();
}, false);
关于javascript - 单击div外部无法关闭iphone中的切换栏菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53940037/