removeClass在iOS v2上不起作用

Question

創建此主題后，我認為問題已解決，但由於某種原因，它不適用於iPad。

應該怎么辦

當單擊.menuButton時，jQuery將.menuButton toggleClass('active') 。 在CSS中， .active將具有display:block; 。 jQuery還將使用$(document).on('click', function() { /* CODE */ });檢查div之外的$(document).on('click', function() { /* CODE */ }); 並從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的類。

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

小提琴

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