Переключить (показать / скрыть) подменю с помощью JavaScript

Question

Я занимаюсь разработкой сайта, на котором я НЕ могу использовать jQuery (пожалуйста, не комментируйте, насколько он хорош, это запрещено), и мне нужно воспроизвести что-то вроде .toggle () только для показа / скрытия div с классом.

У меня есть группа полей со стрелкой, эта стрелка может расширить подменю. Давайте посмотрим пример:

<div class="box">
    <div class="box-utils">
        <a href="#" class="up">&nbsp;</a>
    </div>

    <h2>Example case</h2>

    <div class="box-submenu hidden">
        <ul />
    </div>
</div>

Мне нужно, чтобы щелкнул <a /> внутри <div class="box-utils" />, чтобы показать / скрыть класс подменю box. Когда он скрыт, <a /> должен иметь class = "down", когда он не скрыт, он должен быть class = "up". Это также должно работать с несколькими делами на одной странице.

Может ли кто-нибудь мне помочь?

Заранее спасибо!

Answer 1

Создайте функцию переключения, подобную приведенной ниже, предоставьте атрибут id в DIV (назовите его box-submenu или что-то в этом роде) и вызовите функцию из своего якоря, и используйте ID для поиска того, что вы хотите скрыть / показать.

<script language="javascript"> 
function toggle() {
    var ele = document.getElementById("box-submenu");
    var link = document.getElementById("linkId");
    if(ele.style.display == "block") {
        ele.style.display = "none";
        link.className = "down";
    }
    else {
        ele.style.display = "block";
        link.className = "up";
    }
} 
</script>