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 />是否有类.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等传统浏览器。如果不是，那就这样做。

Answer 2

可能不是您想要这样做的方式，但如果将up或down添加到a的父级，即div.arrow，您可以完成所有操作使用css组合器+隐藏/显示。像这样：

.arrow.down + .extramenu {
  /* the same styles as with hidden class */
}

Answer 3

这是您要查找的代码。在FF5中测试，应该是跨浏览器。

// use in your add_event function  
var submenu = element.parentNode.nextSibling;
while(submenu && (submenu.nodeName!="DIV" || submenu.className.indexOf("extramenu")==-1)) submenu = submenu.nextSibling;
var state = element.className;

一旦您知道最近的选择器与javascript </div>，请选择下一个<div>

3 个答案: