[英]Hiding an <li> element in a <ul>
我需要你的帮助
如果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>
尝试这个
document.getElementById("edit").children[0].style.display = "none"
新增是#edit的第一位置
您没有删除正确的项目,因为[1]
将选择第二个孩子。 要抓取第一个,请改用[0]
:
document.getElementById("edit").children[1].style.display = "none"
这对于给出的第一个示例有效,可能是因为它是第二个元素。
document.getElementById("file").children[1].style.display = "none";
隐藏“保存”菜单项( <ul id="file">
的第二个子项)。
document.getElementById("edit").children[1].style.display = "none";
隐藏“删除”菜单项( <ul id="edit">
的第二个子项)。
如果要隐藏“添加新”子菜单项,则应将<ul id="edit">
的第一个子对象定位为:
document.getElementById("edit").children[0].style.display = "none";
如果您要隐藏带有所有项目的整个“编辑”子菜单,则应按如下所示定位<ul id="edit">
:
document.getElementById("edit").style.display = "none";
这确实指出了使用children
作为选择菜单项的手段的一个重要缺点。 如果项目顺序更改,您的Javascript也将更改。
您最好通过class
名称或id
来定位这些项目。 如果从每个项目a
链接中删除内部div
(这是多余的),并替换li
元素上的id
,则可以仅定位所需的菜单项:
<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";
无论项目的顺序如何,这始终有效。 如果页面中不存在元素,它仍会炸毁并显示错误。 为避免这种情况,您最好使用jQuery之类的JavaScript库来做到这一点: http : //api.jquery.com/hide/ 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.