1

我需要你的帮助

如果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">&gt;&gt; Go to First</div></a></li>
                    <li><a href="#nogo"><div id="goto_next">&gt;Go to Next</div></a></li>
                    <li><a href="#nogo"><div id="goto_prev">Go to Previous&gt;</div></a></li>
                    <li><a href="#nogo"><div id="goto_last">Go to Last&gt;&gt;</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>
4

3 回答 3

11

尝试这个

document.getElementById("edit").children[0].style.display = "none"

Add New 是#edit 的第一个位置

于 2013-09-27T19:43:49.557 回答
1 
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名称或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";

无论项目的顺序如何，这总是有效的。如果页面中不存在元素，它仍然会出现错误。为防止这种情况，您最好使用 jQuery 之类的 javascript 库来执行此操作： http: //api.jquery.com/hide/。

于 2013-09-27T19:48:49.010 回答
1

您没有删除正确的项目，因为[1]将选择第二个孩子。要获取第一个，请[0]改用：

document.getElementById("edit").children[1].style.display = "none"

这适用于给出的第一个示例可能是因为它是第二个元素。

于 2013-09-27T19:44:08.380 回答