为移动版本的切换菜单项创建子菜单

Question

i使用以下代码为移动版本创建一个切换菜单，并且可以正常工作，但我想生成菜单项下方的子菜单。例如，我想为 Services 像New这样的项目创建两个子选项卡，并且仅在用户单击 Services> 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-menu-for-mobile谢谢

Answer 1

您只需在"服务列表"项目中创建另一个列表。您最初可以隐藏列表，并且当您想查看时，通过单击，只需显示它。

<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>

如果您想在单击服务时查看列表，则需要添加JavaScript或JS库，以便这样做：

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

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