在IOS上启用语音时,移动菜单无法打开

Question

我使用safari浏览器在ios中打开我的网站.移动菜单工作正常.

当我点击菜单图标(三行图标)时,它会打开.但是,当我启用语音然后进入浏览器并点击该菜单图标时,移动菜单无法打开.

这是css问题还是我必须添加一些aria属性？

有人能帮我吗？

   

jQuery('.menu-trigge').once('menuMobile').click(function () {
                    jQuery(this).toggleClass('expand');
                    if (jQuery('.menu-trigger').hasClass('expand')) {
                      jQuery('.menu-trigger').first().slideDown();
                    } else {
                      jQuery('.menu-trigger').first().slideUp();
                    }
                  });

.menu-trigger {
	display: inline-block;
	vertical-align: middle;
	cursor: pointer;
	width: 33px;
	margin: 0 0 0 15px;
	transition: 275ms all ease;
}
.menu-trigger span {
	display: block;
	height: 3px;
	background: #233e6b;
	margin-bottom: 4px;
	-webkit-transition: 275ms all ease;
	transition: 275ms all ease;
}
.main-menu {
	position: absolute;
	top: 100%;
	right: -10px;
	width: 100vw;
	z-index: 100;
	background: #fff;
}
ul.menu {
max-height: calc(100vh - 55px);
	overflow: auto;
}

<div class="menu-block">
  <div class="main-menu">
	<div class="menu_wrapper">
	  <ul class="menu">
		<li>Menu 1</li>
		<li>Menu 2</li>
	  </ul>
	</div>
  </div>
  <div class="menu-trigger">
	<span></span>
	<span></span>
	<span></span>
  </div>
</div>

Answer 1

aria-*据我所知，在这种情况下，属性不会导致此类问题。您的 JS/CSS 定位有问题。我无法告诉你如何定位它以及如何实际将其更改为可见，但你可以尝试以下操作：

添加另一个 CSS 类.main-menu-on并为其使用正确的属性，如下所示：

.main-menu-on {
    top: 50px;
    right: 10px;
}

然后使用JS来切换类，例如这样：

document.querySelector('.menu-trigger').addEventListener('click', function () {
var menu = document.querySelector('.main-menu');
menu.classList.toggle('main-menu-on');
}, false);

注意：如果你想让它易于访问，你应该理解并使用aria-*属性。这与您是否能够使用 VoiceOver 打开菜单无关，但使用 VoiceOver 的用户可能会对交互感到困惑。

这是没有属性的示例aria-*：

.main-menu-on {
    top: 50px;
    right: 10px;
}

document.querySelector('.menu-trigger').addEventListener('click', function () {
var menu = document.querySelector('.main-menu');
menu.classList.toggle('main-menu-on');
}, false);

document.querySelector('.menu-trigger').addEventListener('click', function () {
var menu = document.querySelector('.main-menu');
menu.classList.toggle('main-menu-on');
}, false);