removeClass无法在iOS v2上运行

removeClass not working on iOS v2

本文关键字：v2 运行 iOS removeClass      更新时间：2023-10-04

创建此主题后，我认为问题已经解决，但由于某种原因，它在iPad上不起作用。

它应该做什么

单击.menuButton时Jquery将toggleClass('active')。在CSS中，.active将有一个display:block;。Jquery还将使用$(document).on('click', function() { /* CODE */ });检查div外部的单击，并从navmenu中删除类active，这样它将再次隐藏。

代码版本1

HTML5

<header>
  <div class="menuButton">
    Menu
  </div>
  <div class="navmenu">
    <ul>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 1</a></li>
    </ul>
  </div>
</header>

CSS3

.menuButton {
   display:block;
   cursor:pointer;
}
.navmenu {
   display:none;
}
.navmenu.active {
   display:block;
}

Jquery 2.2.1

$(document).ready(function() {
  var removeClassVar = true;
  $('.menuButton').on('click', function() {
     $('.navmenu').toggleClass('active');
     removeClassVar = false;
  });
  $('.navmenu').on('click', function() {
     removeClassVar = false;
  });
  $('html').on('click', function() {
     if (removeClassVar == true) {
        $('.navmenu').removeClass('active');
     }
     removeClassVar = true;
  });
});

JSFiddle

此代码在Windows（Chrome、IE、Edge、Firfox）、Android 5.1、Android 6.0.1和Android 4.4.2（均使用不同浏览器测试）上运行良好。当在Safari和Chrome中用iPhone 5S（iOS 8.4.1）测试时，这将打开菜单，但不会隐藏它。（无法在iPad或其他版本上测试）。

代码版本2

相同的HTML5和CSS3

Jquery 2.2.1

$(document).ready(function() {
  var $ua = navigator.userAgent;
  var $event = ($ua.match(/(iPod|iPhone|iPad)/i)) ? "touchstart" : "click";
  $(document).on($event, function(ev) {
     if ($('.navmenu').hasClass('active')) {
       $('.navmenu').toggleClass('active');
     }
  });
  $('.menuButton').on('click', function(e) {
    e.stopPropagation();
    $('.navmenu').toggleClass('active');
  });
});

JSFidelle

这个代码适用于Windows、Android和iPhone，但昨天我发现，在我借来的iPad上（不知道是哪个iOS版本），它会打开菜单，但你不能点击任何链接，因为当你点击任何东西时，菜单都会关闭，不会将你重定向到你想要的页面。

将on('click', function()更改为on('touchstart', function()不会改变这种情况。

有人知道如何解决这个问题吗？

代码版本3经过大量的尝试，我找到了一种在菜单按钮上使用.toggleClass('active')的方法，并添加了一个关闭按钮，点击后将使用.removeClass('active')。我只需要在body点击时找到删除类的方法。

也许这对你有用。在这种情况下，只有当单击的元素没有链接（a-element）时，菜单才会切换。

$(document).on($event, function(ev) {
    if ( ev.target.nodeName != "A") {      
       $('.navmenu').removeClass('active');
    };
  });
  $('.menuButton').on('click', function(e) {
    e.stopPropagation();
    $('.navmenu').toggleClass('active');
  });

Fiddle

您可以使用下面提到的代码，我认为它会有所帮助：

$(document).ready(function() {
    $(document).mousedown(function(e){
        if($(e.target).parents('.navmenu').length==1 || $(e.target).hasClass('navmenu')){
        }else if($(e.target).parents('.menuButton').length==1 || $(e.target).hasClass('menuButton')){
            $('.navmenu').toggleClass('active');
        }else{
            $('.navmenu').removeClass('active');
        }
    });
});
相关文章：