Using HTML markup instead of classes in a JavaScript drop-down menu

I got a piece of JavaScript from a training video, but I do not like how the HTML that associated with it is built. It's an accordion-style drop down menu, and it uses classes on e开发者_如何学运维ach of the menu items that initiate the drop-down effect. I'll post my code and explain after...

<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>

I would like the HTML to not use classes or IDs, and instead use pure HTML markup and work the same exact way. I'm no good enough at JavaScript to figure out how to do this, so I was hoping someone could modify this code to make it work the way I'd like it to. I would also like to keep , so it would be awesome if the script could run based on that ID so I can put other ul's on the page without them interfering with each other. Thank you!

This is "pure" HTML. Classes help define what styles and effects should be applied to the specific HTML element, and the IDs uniquely identify the HTML element on the page (or "in the document").

Without those you will lose the ability to (remotely easily) control what the menu looks like, or how it behaves (with Javascript) because the scripts and styles won't know what HTML elements they should act upon.

Does that make sense?

Classes and IDs are good things, and are actually the "best practice" way to do what you're trying to do - at least as well as I was able to understand your question.

I second anonymous coward comments because the best way to target specific elements is to use classes and ids, unless you are sure that the content isn't going to change. If that's the case you can use document.querySelectors() or document.querySelectorsAll() to select the elements you want. It only works in Firefox 3.1+, IE 8+ and Safari 3.1+, I don't know about the other browsers.

This is going to be extremely troublesome to figure out since you'll have to construct very elaborate selector strings using nothing but element names (div, p, a, etc.), descendant selectors (div p, ul li a, etc.), child selectors (p > span) and pseudo-classes like :first-child. These are all CSS2 compatible and should work in most modern browsers, however you may want to use CSS3 selectors, although they aren't so widely supported.