JavaScript: Hide and Show Menu Class

Question

var Menu = function() {
    state = 0;
}
Menu.prototype.click = function() {
    if (this.state == 1) {
        $(document).ready(function(){
            $("#collapse-menu").click(function(){
                $("#list-navbar").show(500);
                this.state = 0;
            });
        });
    } else {
        $(document).ready(function(){
            $("#collapse-menu").click(function(){
                $("#list-navbar").hide(500);
                this.state = 1;
            });
        });
    }
}

How can I instantiate the class on the page load and just call the function click onclick event, keeping the class instantiated?

What's this code all about? I mean what's that `Menu` and it's `state` for? — Roko C. Buljan, Mar 26 '16 at 20:14
It's a collapse menu. If state is equals 1 it means it's hidden and I want to show if the user click on the button. If it's equals 0, it means it's being displayed and I want to hide if the user click the button. — Chittolina, Mar 26 '16 at 20:16
Note that you don't need to nest your `$(document).ready()` handlers. You can remove those lines. — Rory McCrossan, Mar 26 '16 at 20:24
@Chittolina sorry, had to fix my code, there was a flaw ;) please take review action to match changes. — Roko C. Buljan, Mar 26 '16 at 20:36

score 2 · Accepted Answer · edited May 23 '17 at 12:24

var Menu = function() {
  this.state = 0;
};

Menu.prototype.click = function() {
  var that = this;   // our Menu object

  $("#collapse-menu").click(function(){
    that.state ^= 1; // Toggles 1,0,1... values
    $("#list-navbar")[that.state?"hide":"show"](500);
  });
};


jQuery(function( $ ) { // DOM ready here

  var m = new Menu();  // New Menu instance
  m.click();           // init clicks on #collapse-menu

});

jsBin demo

about ^ as toggler: https://stackoverflow.com/a/22061240/383904

JavaScript: Hide and Show Menu Class

1 Answers1