javascript - 使用 javascript 知道最接近的选择器后，选择下一个

Question

我正在开发一个网站，我不会使用 jQuery(不讨论这个)，所以使用纯 javascript 和自定义 javascript 框架。

其实我发现了一个不知道怎么处理的情况:

我有一组选择器，我为每个选择器添加一个“onclick”事件来显示/隐藏一个 div。

例如:

<div id="menu">
    <div class="menu-item">
        <div class="arrow">
            <a class="down">Open / Close</a>
        </div>

        Menu Item

        <div class="extramenu hidden">
            Extra menu items
        </div>
    </div>

    <div class="menu-item">
        <div class="arrow">
            <a class="up">Open / Close</a>
        </div>

        Menu Item 2

        <div class="extramenu">
            Extra menu items
        </div>
    </div>

    <div class="menu-item">
        <div class="arrow">
            <a class="down">Open / Close</a>
        </div>

        Menu Item 3

        <div class="extramenu hidden">
            Extra menu items
        </div>
    </div>
</div>

我选择了所有“div.menu-item .arrow a”项目，所以我有 3 个项目。我为每个项目添加了一个 onclick 事件(实际上工作正常)。

我需要存档的是如何在 div.menu-item 中选择“最接近”的类 .extramenu。然后检测是否<a />有一个 class .up 或 .down 并且如果 class == .up，添加隐藏的类；如果 class == .down，删除隐藏的类。

这是一个必须做什么的概念，它不是 javascript 代码:

var elements; // my list of elements

each(elements, function(element) {
    // here element is pointing to the ANCHOR
    add_event(element, "onclick", function(e) {
        var submenu; // here I need to detect the submenu closest to my anchor
        var state; // here I need to know if the anchor has class up or down

        if (state == "up")
        {
            add_class(submenu, "hidden"); // hide the submenu div
            remove_class(element, "up"); // remove the class up
            add_class(element, "down"); // and add the class down
        }
        else if (state == "down")
        {
            remove_class(submenu, "hidden"); // remove the class to show the menu
            remove_class(element, "down"); // remove the class down
            add_class(element, "up"); // and add the class up
        }
    });
});

谢谢大家，如果解释得不好，我很抱歉，我尽力了!

Answer 1

element.querySelectorAll允许您通过 CSS 选择器选择元素。

element.classList允许您访问元素的类

add_event(element, "onclick", function(e) {
    var el = e.target, state;
    var parent = el.parentNode;
    while (!parent.classList.contains('menu-item')) {
        parent = parent.parentNode;
    }
    var submenu = parent.querySelector('extramenu');
        if (el.classList.contains('up')) {
        state = 'up';
    } else {
        state = 'down'
    }

    /* ... */
});

您可以自己编写其余的伪代码。

我假设您已经在使用 Modernizr 来支持 IE8 等旧版浏览器。如果不是，那就这样做。