Использование разметки HTML вместо классов в раскрывающемся меню JavaScript

Question

Я получил фрагмент JavaScript из обучающего видео, но мне не нравится, как строится связанный с ним HTML.Это выпадающее меню в стиле аккордеона, в котором используются классы для каждого из пунктов меню, которые инициируют эффект выпадающего меню.Я опубликую свой код и объясню после ...

<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 не использовал классы или идентификаторы, а вместо этогоиспользуйте чистую разметку HTML и работайте точно так же.Я не достаточно хорош в JavaScript, чтобы понять, как это сделать, поэтому я надеялся, что кто-нибудь может изменить этот код, чтобы он работал так, как мне бы хотелось.Я также хотел бы сохранить, поэтому было бы здорово, если бы скрипт мог работать на основе этого идентификатора, чтобы я мог размещать другие ul на странице, не мешая друг другу.Спасибо!

Answer 1

Это «чистый» HTML.Классы помогают определить, какие стили и эффекты следует применять к конкретному элементу HTML, а идентификаторы однозначно идентифицируют элемент HTML на странице (или «в документе»).

Без них вы потеряете возможность (легко и дистанционно) контролировать внешний вид меню или его поведение (с помощью Javascript), поскольку сценарии и стили не будут знать, с какими элементами HTML они должны работать.

Имеет ли это смысл?

Классы и идентификаторы - это хорошие вещи , и на самом деле это "лучший практический" способ сделать то, что вы пытаетесь сделать - по крайней мере, так, как я смог понять ваш вопрос,

Answer 2

Я второй анонимный трусливый комментарий, потому что лучший способ нацеливаться на конкретные элементы - это использовать классы и идентификаторы, если вы не уверены, что содержимое не изменится. В этом случае вы можете использовать document.querySelectors () или document.querySelectorsAll () , чтобы выбрать нужные элементы. Он работает только в Firefox 3.1+, IE 8+ и Safari 3.1+, о других браузерах я не знаю.

Это будет чрезвычайно сложно выяснить, так как вам придется создавать очень сложные строки селектора, используя только имена элементов (div, p, a и т. Д.), Селекторы потомков (div p, ul li a, и т.д.), дочерние селекторы (p> span) и псевдоклассы, такие как: first-child. Все они совместимы с CSS2 и должны работать в большинстве современных браузеров, однако вы можете использовать селекторы CSS3, хотя они не так широко поддерживаются.