这是一个简单的切换,但是,我无法让它在IOS上工作。我为这段代码添加了一个小提琴,还有一个测试站点。
HTML包括所有咏叹调,ID和类
<nav id="navigation" aria-label="Section">
<div class="mobileMenu">
<button id="menu-toggle" class="anchor-link menu_container">
MENU
<span id="menu_open" class="fa fa-bars" aria-hidden="true"></span>
<span id="menu_close" class="fa fa-caret-square-o-up" aria-hidden="true"></span>
</button>
</div>
<ul class="nav burgerTime" hidden>
<li data-id="01" class="nav__module nav__chapter-01">
<ul class="nav__items">
<li> <a class="menu_p01" href="../index.html">Accordion</a> </li>
<li> <a class="menu_p02" href="../tabs.html">Tabs</a> </li>
</ul>
</li>
</ul>
</nav>
jQuery切换菜单项和扩展咏叹调。
$( "#menu-toggle" ).attr( {
"aria-expanded": "false"
} );
$( "#menu-toggle" ).on( "click", function( e ) {
$( "body" ).toggleClass( "active" );
$( ".nav.burgerTime" ).toggle();
$( this ).attr( "aria-expanded", function( i, attr ) {
return attr === "true" ? "false" : "true";
} );
e.preventDefault();
} );
测试现场 http://www.thehouseofcats.com.au 需要缩小屏幕尺寸才能显示切换菜单。