Question

在移动设备上的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>

Answer 1

{p {1}}的

点击事件在基于Safari的设备上不起作用。您可以创建一个可点击区域并将其设置为body，或者另一个解决方案是使用touchevents。

cusrsor: pointer

在您的代码中，应该是：

document.addEventListener('touchend', function(e){
    // your event body here 
}, false);

Answer 2

身体的点击事件在safari可触摸设备上不起作用。我已经解决了react.Js下拉列表的问题。让我们看看，

componentDidMount(){
                document.body.style.cursor = 'pointer';
        },
        componentWillUnmount(){
            document.body.style.cursor = 'default';
        }
    })

在div外部单击无法关闭iPhone中的切换栏菜单

2 个答案: