Question

我使用以下代码为移动版本创建一个切换菜单，它工作正常，但我想在菜单项下面生成一个子菜单。例如，我希望为服务项创建两个子标签，例如新建和仅用于点击服务时出现。有人可以帮我这么做吗？

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

您只需在“服务”列表项中创建另一个列表。您最初可以隐藏列表，当您想要查看时，通过点击，您只需显示它。

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

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

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

1 个答案: