Why cannot access to variable inside function that assigned jquery object

javascript

Solution

I'm not absolutely sure, but I believe what's happening is that your selectors are not matching any elements, because they're called before the elements are added to the DOM. I mean these:

container: $(".site .head .nav-bar .navigation"),
button: $(".site .head .nav-bar .nav-button"),

Try moving your whole JavaScript to the end of the body (right before `</body>`).

Another possible solution is to only populate those properties from `Site.init` (currently, they're populated immediately when the object literal is declared:

var Site = {
    init: function () {

        this.Navigation.container = $(".site .head .nav-bar .navigation");
        this.Navigation.button = $(".site .head .nav-bar .nav-button");

        $(".site .head .nav-bar .nav-button").click(function () {
            Site.Navigation.toggle();
            return false;
        });
    },
    Navigation: {
        container: null,
        button: null,
        toggle: function () {
            if (this.button.hasClass("active")) {
                this.hide();
            }
            else {
                this.show();
            }
        },
        show: function () {
            this.button.addClass("active");
            this.container.slideDown();
            return false;
        },
        hide: function () {
            this.button.removeClass("active");
            this.container.slideUp();
            return false;
        }
        //another stuff
    }

}

Problem

Original source