我正在尝试创建一个菜单，其特点是菜单包含一些带有每个菜单标题的图标和一个也与菜单相关联的按钮。当我们点击该按钮时，每个菜单标题都需要隐藏 并且只需要显示图标。为了实现这一点，我为每个菜单标题提供了一个公共类名，并给出了一个java脚本函数。我将在下面给出。（我添加了下面使用的菜单和java脚本功能）
function hideSideMenu() {
document.getElementById("menu-title").style.display = "none";
}
<ul id="leftMenu" class="clearfix">
<li class="topmenu ltopmenu-display-event"><a href="http://qmsadm.local/dashboard"><span class="ico fa fa-fw fa-dashboard "></span><span id="menu-title" class="menu-title">Dashboard</span></a></li>
<li class="topmenu ltopmenu-display-event"><a href="javascript:void(0)"><span class="ico fa fa-fw fa-globe "></span><span id="menu-title" class="menu-title">Admin</span><span class="fa fa-chevron-right spinner-ico"></span></a>
<ul><li><a href="http://qmsadm.local/admin/users"><span class="ico fa fa-fw fa-users "></span>Users</a></li>
<li><a href="http://qmsadm.local/admin/roles"><span class="ico fa fa-fw fa-user-md "></span>Roles</a></li>
<li><a href="http://qmsadm.local/admin/menu"><span class="ico fa fa-fw fa-navicon "></span>Manage Menu</a></li>
<li><a href="http://qmsadm.local/admin/clients"><span class="ico fa fa-fw fa-pagelines "></span>Clients</a></li>
<li><a href="http://qmsadm.local/admin/templates"><span class="ico fa fa-fw fa-glass "></span>Templates</a></li>
<li><a href="http://qmsadm.local/admin/devreqs"><span class="ico fa fa-fw fa-cloud-upload "></span>Device Requests</a></li><li><a href="http://qmsadm.local/admin/devices"><span class="ico fa fa-fw fa-laptop "></span>Devices</a></li></ul></li><li class="topmenu ltopmenu-display-event"><a href="javascript:void(0)"><span class="ico fa fa-fw fa-puzzle-piece "></span><span id="menu-title" class="menu-title">App</span><span class="fa fa-chevron-right spinner-ico"></span></a><ul><li><a href="http://qmsadm.local/app/counters"><span class="ico fa fa-fw fa-ticket "></span>Counters</a></li>
<li><a href="http://qmsadm.local/app/displays"><span class="ico fa fa-fw fa-desktop "></span>Displays</a></li>
<li><a href="http://qmsadm.local/app/kiosks"><span class="ico fa fa-fw fa-hand-o-up "></span>Kiosks</a></li>
<li><a href="http://qmsadm.local/app/ads"><span class="ico fa fa-fw fa-film "></span>Ads</a></li><li><a href="http://qmsadm.local/app/category"><span class="ico fa fa-fw fa-star "></span>Category</a></li>
<li><a href="http://qmsadm.local/app/subcategory"><span class="ico fa fa-fw fa-star-half "></span>Sub Category</a></li></ul></li>
<li class="topmenu ltopmenu-display-event"><a href="javascript:void(0)"><span class="ico fa fa-fw fa-pie-chart "></span><span id="menu-title" class="menu-title">Reports</span><span class="fa fa-chevron-right spinner-ico"></span></a><ul><li><a href="http://qmsadm.local/reports/token/detail"><span class="ico fa fa-fw fa-th-large "></span>Token Detail</a></li><li><a href="http://qmsadm.local/reports/token/summary"><span class="ico fa fa-fw fa-envelope-o "></span>Token Summary</a></li>
<li><a href="http://qmsadm.local/reports/counter/detail"><span class="ico fa fa-fw fa-pencil-square-o "></span>Counter Detail</a></li>
<li><a href="http://qmsadm.local/reports/counter/summary"><span class="ico fa fa-fw fa-briefcase "></span>Counter Summary</a></li>
<li><a href="http://qmsadm.local/reports/regusers"><span class="ico fa fa-fw fa-dedent "></span>Registered Users</a></li>
<li><a href="http://qmsadm.local/reports/admin/activities"><span class="ico fa fa-fw fa-clipboard "></span>Admin Activities</a></li></ul>
</li>
<li class="topmenu ltopmenu-display-event"><a href="javascript:void(0)"><span class="ico fa fa-fw fa-gears "></span><span id="menu-title" class="menu-title">Settings</span><span class="fa fa-chevron-right spinner-ico"></span></a><ul><li><a href="http://qmsadm.local/settings/personal"><span class="ico fa fa-fw fa-columns "></span>Personal</a></li>
<li><a href="http://qmsadm.local/settings/language"><span class="ico fa fa-fw fa-bold "></span>Language</a></li>
<li><a href="http://qmsadm.local/settings/client"><span class="ico fa fa-fw fa-male "></span>Client</a></li></ul></li><li class="topmenu ltopmenu-display-event"><a href="javascript:void(0)"><span class="ico fa fa-fw fa-anchor "></span><span id="menu-title" class="menu-title">Super</span><span class="fa fa-chevron-right spinner-ico"></span></a>
<ul><li><a href="http://qmsadm.local/super/activities"><span class="ico fa fa-fw fa-pencil "></span>Activities</a></li></ul></li><ul></ul></li><ul></ul></li><ul></ul></li><ul></ul></li><ul></ul></li><ul></ul></li><ul></ul></li><ul></ul></li><ul></ul></li><ul></ul></li><ul></ul></li><ul></ul></li><ul></ul></li><ul></ul></li><ul></ul></li><ul></ul></li>
</ul>
</li>
</ul>
这个脚本的问题是只适用于第一个菜单项的问题。我在脚本上是新的，所以你可能觉得这很有趣。可以使用相同的类名选择所有html元素java脚本？可能解决了我的问题...我不想使用jquery ..
我也试过这个
document.getElementsByClassName（＆＃34; menu-title＆＃34;）。style.display =＆＃34; none＆＃34;;
但它不适合我。
答案 0 :(得分：1)
您可以使用document.querySelectorAll('.menu-title')或document.getElementsByClassName("menu-title")，但两者都返回Arrays / Enumerables / Nodecollections。所以你需要迭代它们。：
var titles = document.querySelectorAll('.menu-title');
for( i in titles ) {
titles[i].style.display = 'none';
}
您选择的语法看起来非常受jQuery启发。在jQuery中，这可以类似，但jQuery在内部映射Arrays并迭代它们并应用操作。纯JS不会这样做。
（您也可以在Collection上使用Array.forEach（）来实现此目的）
答案 1 :(得分：0)
添加jQuery解决方案 - 您可以使用jQuery each
您可以选择菜单中的每个li
$("#leftMenu li.topmenu").each(function(){
// You'll find selected Object in 'this' variable.
// you can add class or do other stuff
$(this).addClass("activemenu");
})
或者您可以选择菜单的每个锚元素
$("#leftMenu li a").each(function(){
// You'll find selected Object in 'this' variable.
// you can add class or do other stuff
console.log($(this).attr("href"));
$(this).parent('li').addClass("activemenu");
})
答案 2 :(得分：0)
您是否尝试document.getElementsByClassName("menu-title").style.display = "none";代替document.getElementById("menu-title").style.display = "none";？