如何使用纯javascript创建嵌套树打开/关闭按钮

Question

我有以下html结构。当有人点击“switch”div时，我想在内容div和分支ul兄弟中添加一个hide类。再次点击时我想删除它们。我可以编写click事件，但我不知道如何从click事件中引用嵌套内容和分支。

<ul id="tree">
    <li class="leaf">
        <div class="switch"></div>
        <div class="content">
            ... stuff
        </div>
        <ul class="branch">
            <li class="leaf">
                <div class="switch"></div>
                <div class="content">
                    ... stuff
                </div>
                <ul class="branch">
                    <!-- Can be many layers deep -->
                </ul>
            </li>
        </ul>
    </li>
    <li class="leaf">
        <div class="switch"></div>
        <div class="content">
            ... stuff
        </div>
        <ul class="branch">
            <li class="leaf">
                <div class="switch"></div>
                <div class="content">
                    ... stuff
                </div>
                <ul class="branch">
                    <!-- Can be many layers deep -->
                </ul>
            </li>
        </ul>
    </li>
    <!-- Can be many more of these -->
</ul>

的Javascript

var Library = (function () {
    "use strict";


    /**
     * Create click events for all classes passed in.
     *
     * This is used by newer browsers that have getElementsByClassName.
     *
     * @param {array} class_names The class names to attatch click events to.
     * @param {function} The callback to handle the click event.
     *
     * @return void
     */
    var classNameClick = function(class_names, clickEvent) {
        for(var i = 0; i < class_names.length; i++) {
            var elements = document.getElementsByClassName(class_names[i]);
            for(var j = 0; j < elements.length; j++) {
                elements[j].onclick = clickEvent;
            }
        }
    };

    /**
     * Loops through all DOM elements to find classes to attatch click events to.
     *
     * This is used by older browsers that don't have getElementsByClassName
     *
     * @param {array} class_names The class names to attatch click events to.
     * @param {function} The callback to handle the click event.
     *
     * @return void
     */
    var classTagClick = function(class_names, clickEvent) {
        var elements = document.getElementsByTagName("*");
        for(var i = 0; i < elements.length; i++) {
            var element = elements[i];
            for(var j = 0; j < class_names.length; j++) {
                if(element.className.indexOf(class_names[j]) >= 0) {
                    element.onclick = function() {
                        clickEvent();
                    }
                }
            }
        }
    };

    return {

        /**
         * Loops through all DOM elements to find classes to attatch click events to.
         *
         * @param {array} class_names The class names to attatch click events to.
         * @param {function} The callback to handle the click event.
         *
         * @return void
         */
        classClick : function(class_names, clickEvent) {
            if (typeof document.getElementsByClassName !== "undefined") {
                classNameClick(class_names, clickEvent);
            } else {
                classTagClick(class_names, clickEvent);
            }
        }

    };
}());

var Tree = (function () {
    "use strict";

    return {

        construct : function () {

            Library.classClick("switch", function() {
                // Not sure how to reference the relevant content and branch class here.
            });

        }
    };
}());

window.onload = function() {
    Tree.construct();
}

我不能使用jQuery或其他库（使用jQuery很容易）。

Answer 1

我通过在两个点击事件中添加以下内容来解决这个问题

element.onclick = function() {
    clickEvent.apply(this);
}

这将点击事件函数中的this对象替换为单击的dom元素。

然后我将以下内容添加到click事件中。

Library.classClick(["switch"], function() {
    var leaf_node = this.parentNode;
    var parent_class = leaf_node.className;
    if (parent_class.indexOf(" closed") === -1) {
        leaf_node.className += " closed";
    } else {
        leaf_node.className = leaf_node.className.replace(" closed", "");
    }
});

最后添加了以下css

li.leaf.closed＆gt; .content，li.leaf.closed＆gt; .branch {     display：none; }