function Navigation (container) {

    this.defaultConfig = {
        container: container,
        prop: [
            {value: "0", color: "red"},
            {value: "1", color: "blue"},
            {value: "2", color: "blue"},
            {value: "3", color: "blue"}
        ],

        fontColor: "white",
        fontSize: "20px",
        align: "center",
    };


    this.init = function () {
        this.createList();
        this.defaultConfig.container.children[0].isClick = false;
        this.defaultConfig.container.children[0].addEventListener("click", function () {
            this.isClick = !this.isClick;
            if (this.isClick) {
                this.parentNode.style.height = this.offsetHeight + "px";
            }else{
                this.parentNode.style.height = 200 + "px";
            }
        })
    }


}

Navigation.prototype.createList = function () {
    for (var i = 0; i < this.defaultConfig.prop.length; iPP) {
        var div = document.createElement("div");
        div.innerHTML = this.defaultConfig.prop[i].value;
        div.style.color = this.defaultConfig.fontColor;
        div.style.fontSize = this.defaultConfig.fontSize;
        div.style.backgroundColor = this.defaultConfig.prop[i].color;
        div.style.textAlign = this.defaultConfig.align;
        div.style.width = 200 + "px";
        div.style.height = 50 + "px";
        div.style.lineHeight = 50 + "px";
        div.style.border = "1px solid";
        this.defaultConfig.container.appendChild(div);
    }

}

the front-end rookie, after learning JS for a period of time, only did the most important functions, but did not write some other small functions. I always feel that the code I write is very bad, but I don"t know how to improve it. I hope you can give me some guidance.