Question

创建this主题后，我认为问题已解决，但由于某种原因，它无法在iPad上运行。

应该做什么

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

代码版本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

Perhapes这适合你。在这种情况下，菜单仅在被点击的元素没有链接（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

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

removeClass无法在iOS v2上运行

2 个答案: