removeClass 在 iOS v2 上不起作用答案

【问题标题】：removeClass not working on iOS v2removeClass 在 iOS v2 上不起作用
【发布时间】：2016-03-31 12:03:46
【问题描述】：

创建this 主题后，我认为问题已解决，但由于某种原因，它无法在 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');
  });
});

JSFidlle

此代码适用于 Windows、Android 和 iPhone，但昨天我发现在我借用的 iPad 上（不知道哪个 iOS 版本）这将打开菜单，但您无法点击任何链接，因为当您单击任何内容时，菜单将关闭，并且不会将您重定向到您想要的页面。

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

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

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

【问题讨论】：

标签： javascript jquery ios css

【解决方案1】：

也许这对你有用。在这种情况下，只有当点击的元素不是链接（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

【讨论】：

当我使用它时，点击它的位置无关紧要，它会在点击时显示菜单；）

【解决方案2】：

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

$(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');
        }
    });
});

【讨论】：