javascript 在 <ul> 中隐藏 <li> 元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19058808/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Hiding an <li> element in a <ul>
提问by John Smith
I need your help
我需要你的帮助
If document.getElementById("file").children[1].style.display = "none";hides the "Save" item in the "file" menu, then document.getElementById("edit").children[1].style.display = "none";does not work properly and does not hide the "Add new" item in the "edit" menu item.
如果document.getElementById("file").children[1].style.display = "none";隐藏“文件”菜单中的“保存”项，则document.getElementById("edit").children[1].style.display = "none";无法正常工作，并且不会隐藏“编辑”菜单项中的“添加新”项。
<div id="menuwrapper">
<div id="menu" style="width: 1001px; height: 20px">
<ul>
<li>
<a href="#nogo"><div id="div_rssims_file">File</div></a>
<ul id="file">
<li><a onclick="window.print()"><div id="div_rssims_file_print">Print</div></a></li>
<li id="li_rssims_file_save"><a onclick="rssims_save()"><div id="div_rssims_file_save">Save</div></a></li>
<li><a onclick="rssims_save();window.close()"><div id="div_rssims_file_save_exit">Save & Exit</div></a></li>
<li><a onclick="window.close()"><div id="div_rssims_file_exit">Exit</div></a></li>
</ul>
</li>
<li>
<a href="#nogo"><div id="div_rssims_edit">Edit</div></a>
<ul id="edit">
<li><a href="#nogo" onclick="rssims_addnew()"><div id="div_rssims_edit_addnew">Add new</div></a></li>
<li><a href="#nogo" onclick="sims_delete()"><div id="delete">Delete</div></a></li>
<li><a href="#nogo" onclick="sims_reset()"><div id="clear">Clear Form</div></a></li>
</ul>
</li>
<li>
<a href="#nogo"><div id="div_rssims_view">View</div></a>
<ul>
<li><a href="#nogo"><div id="goto_first">>> Go to First</div></a></li>
<li><a href="#nogo"><div id="goto_next">>Go to Next</div></a></li>
<li><a href="#nogo"><div id="goto_prev">Go to Previous></div></a></li>
<li><a href="#nogo"><div id="goto_last">Go to Last>></div></a></li>
</ul>
</li>
<li>
<a href="#nogo"><div id="div_rssims_reports">Reports</div></a>
<ul>
<li><a href="#nogo"><div id="export_excel">Export to Excel Table</div></a></li>
<li><a href="#nogo" onclick="sims_compile_htmltable()"><div id="export_html">Export to HTML Table</div></a></li>
<li><a href="#nogo" onclick="sims_compile_htmllist()"><div id="export_list">Export to HTML List</div></a></li>
<li><a href="#nogo" onclick="sims_compile_contactcard()"><div id="export_contact">Export as Contact Card</div></a></li>
</ul>
</li>
<li>
<a style="cursor: pointer;" onclick="sims_logoff()"><div id="div_rssims_logoff">Logoff</div></a>
</li>
</ul>
</div>
</div>
回答by Supernini
Try this
试试这个
document.getElementById("edit").children[0].style.display = "none"
Add New is a first position of #edit
添加新是#edit 的第一个位置
回答by Broxzier
You're not deleting the right item, because [1]will select the secondchild. To grab the first one, use [0]instead:
您没有删除正确的项目，因为[1]会选择第二个孩子。要获取第一个，请[0]改用：
document.getElementById("edit").children[1].style.display = "none"
That this works for the first example given is probably because it isthe second element.
这适用于给出的第一个示例可能是因为它是第二个元素。
回答by Kamiel Wanrooij
document.getElementById("file").children[1].style.display = "none";
Is hiding the 'Save' menu item (the 2nd child of <ul id="file">).
正在隐藏“保存”菜单项（ 的第二个子项<ul id="file">）。
document.getElementById("edit").children[1].style.display = "none";
Is hiding the 'Delete' menu item (the 2nd child of <ul id="edit">).
正在隐藏“删除”菜单项（ 的第二个子项<ul id="edit">）。
If you want to hide the 'Add New' submenu item, you should target the first child of <ul id="edit">like this:
如果你想隐藏“添加新”子菜单项，你应该<ul id="edit">像这样定位第一个子菜单：
document.getElementById("edit").children[0].style.display = "none";
If you want to hide the entire 'Edit' submenu with all items, you should target the <ul id="edit">like this:
如果您想隐藏包含所有项目的整个“编辑”子菜单，您应该<ul id="edit">像这样定位：
document.getElementById("edit").style.display = "none";
This does point out an important drawback of using childrenas a means of selecting menu items. If the order of the items changes, so does your Javascript.
这确实指出了children用作选择菜单项的一种方式的一个重要缺点。如果项目的顺序发生变化，您的 Javascript 也会发生变化。
You are much better off targeting the items by their classnames or ids. If you remove the inner divfrom the alink in each item (this is superfluous), and replace the idon the lielement, you can target just the menu item you want:
您最好按class名称或ids定位项目。如果您div从a每个项目的链接中删除内部（这是多余的），并替换元素id上的li，您可以只定位您想要的菜单项：
<ul id="edit">
<li id="div_rssims_edit_addnew"><a href="#nogo" onclick="rssims_addnew()">Add new</a></li>
<li id="delete"><a href="#nogo" onclick="sims_delete()">Delete</a></li>
<li id="clear"><a href="#nogo" onclick="sims_reset()">Clear Form</a></li>
</ul>
document.getElementById("div_rssims_edit_addnew").style.display = "none";
This always works, no matter what the order of the items is. It still blows up with an error if the element(s) are not present in the page. To prevent this, you best use a javascript library like jQuery to do this: http://api.jquery.com/hide/.
无论项目的顺序如何，这始终有效。如果页面中不存在元素，它仍然会因错误而爆炸。为了防止这种情况，你最好使用像 jQuery 这样的 javascript 库来做到这一点：http: //api.jquery.com/hide/。
