javascript - 在 JavaScript 下拉菜单中使用 HTML 标记而不是类

Question

我从培训视频中获得了一段 JavaScript，但我不喜欢与其关联的 HTML 的构建方式。它是一个 Accordion 样式的下拉菜单，它在启动下拉效果的每个菜单项上使用类。我将发布我的代码并解释...

<script type="text/javascript">
window.onload = initAll;

function initAll() {
    var allLinks = document.getElementsByTagName('a');
    for (var i=0;i<allLinks.length;i++) {
        if (allLinks[i].className.indexOf('menuLink') > -1) {
            allLinks[i].onclick = toggleMenu;
        }
    }
}
function toggleMenu() {
    var startMenu = this.href.lastIndexOf('/')+1;
    var stopMenu = this.href.lastIndexOf('.');
    var thisMenuName = this.href.substring(startMenu,stopMenu);

    var thisMenu = document.getElementById(thisMenuName).style;
    if (thisMenu.display == 'block') {
        thisMenu.display = 'none';
    }
    else {
        thisMenu.display = 'block';
    }
    return false;
}</script>
<style type="text/css">
body {
    background-color: white;
    color: black;
}

div {
    padding-bottom: 10px;
    background-color: #6FF;
    width: 220px;
}

ul.menu {
    display: none;
    list-style-type: none;
    margin-top: 5px;
}

a.menuLink {
    font-size: 16px;
    font-weight: bold;
}

a {
    text-decoration: none;
}
</style>

<div id="nav">
    <ul>
        <li><a href="menu1.html" class="menuLink">Comedies</a>
            <ul class="menu" id="menu1">
                <li><a href="pg1.html">All's Well That Ends Well</a></li>
                <li><a href="pg2.html">As You Like It</a></li>
                <li><a href="pg3.html">Love's Labour's Lost</a></li>
                <li><a href="pg4.html">The Comedy of Errors</a></li>
            </ul>
        </li>
        <li><a href="menu2.html" class="menuLink">Tragedies</a>
            <ul class="menu" id="menu2">
                <li><a href="pg5.html">Anthony &amp; Cleopatra</a></li>
                <li><a href="pg6.html">Hamlet</a></li>
                <li><a href="pg7.html">Romeo &amp; Juliet</a></li>
            </ul>
        </li>
        <li><a href="menu3.html" class="menuLink">Histories</a>
            <ul class="menu" id="menu3">
                <li><a href="pg8.html">Henry IV, Part 1</a></li>
                <li><a href="pg9.html">Henry IV, Part 2</a></li>
            </ul>
        </li>
    </ul>
</div>

我希望 HTML 不使用类或 ID，而是使用纯 HTML 标记并以完全相同的方式工作。我对 JavaScript 的了解不够好，无法弄清楚如何做到这一点，所以我希望有人可以修改这段代码，使其按照我希望的方式工作。我还想保留 ，所以如果脚本可以基于该 ID 运行，那就太棒了，这样我就可以将其他 ul 放在页面上，而不会相互干扰。谢谢!

Answer 1

这是“纯”HTML。类帮助定义应将哪些样式和效果应用于特定的 HTML 元素，并且 ID 唯一标识页面上(或“文档中”)的 HTML 元素。

如果没有这些，您将无法(轻松地远程)控制菜单的外观或菜单的行为方式(使用 Javascript)，因为脚本和样式将不知道它们应该对哪些 HTML 元素执行操作。

这有道理吗？

类和 ID 是好东西，并且实际上是完成您想要做的事情的“最佳实践”方式 - 至少就像我能够理解您的问题一样。