在移动版本的切换菜单项下方创建子菜单

Question

我使用以下代码为移动版本创建切换菜单，它工作正常，但我想在菜单项下方生成一个子菜单。例如，我希望必须为 SERVICES 项目创建两个子选项卡，例如 New 和 Used 仅在用户单击 SERVICES 时才会出现。有人可以帮我做这个吗？

HTML

<nav id="navigation">
<a class="menu_button" href="#footer_nav" onclick="toggleNav(); return false;">&#9776;  MENU</a>
<ul id="navigation_list" role="navigation">
<li><a href=#>HOME</a></li>
<li><a href=#>SERVICES</a></li>
<li><a href=#>WORK</a></li>
<li><a href=#>CONTACT</a></li>
</ul>
</nav>

Javascript

var originalNavClasses;

function toggleNav() {
var elem = document.getElementById('navigation_list');
var classes = elem.className;
if (originalNavClasses === undefined) {
originalNavClasses = classes;
}
elem.className = /expanded/.test(classes) ? originalNavClasses : originalNavClasses + ' expanded';
}

来自http://blog.g-design.net/post/42617934013/create-an-accessible-toggle-menu-for-mobile 谢谢

Answer 1

您只需在 SERVICES 列表项中创建另一个列表。您最初可以隐藏列表，当您想查看它时，只需单击即可显示它。

<nav id="navigation">
<a class="menu_button" href="#footer_nav" onclick="toggleNav(); return false;">&#9776;  MENU</a>
<ul id="navigation_list" role="navigation">
<li><a href=#>HOME</a></li>
<li id="services-item"><a href="#">SERVICES</a> 
    <ul id="sub_list" style="display: none;">
      <li>NEW</li> 
      <li>USED</li> 
    </ul> 
  </li>
<li><a href=#>WORK</a></li>
<li><a href=#>CONTACT</a></li>
</ul>
</nav>

如果您想在点击 SERVICES 时看到列表，则需要添加 javascript 或 JS 库来执行此操作：

//jQuery
$('#services-item').on('click', function() {
    $('#sub-list').toggle();
)};

此方法不允许 SERVICES 将用户定向到页面。如果您需要它来将用户引导至页面，则只需在服务文本旁边添加一个图标，该图标会在单击时切换子列表。