Remove error when backbone dropdown is hidden?

Question

JavaScript

you need to hide the dropdown menu on click on document.

events: {
      'click': function() {
        this.countriesDropDownListView.toggleList();
      }
    },

toggleList: function() {
      this.$el.toggle();
      $(document).one('click', function() {this.$el.toggle()});
    }

This whole thing generally works, but throws out this error:

Cannot read property 'toggle' of undefined

Also, I'm not very sure of the correctness of this approach, if there are recommendations, I'll listen.

Answer 1

toggleList: function() {
  var el = this.$el;
  el.toggle();
  $(document).one('click', function() {
    el.toggle();
  });
}

Answer 2

Thanks for the answers, indeed both answers are correct, but still I will leave the code where I stopped

toggleList: function(e) {
      e.stopPropagation();
      this.$el.toggle();
      $(document).one('click', function() {this.$el.hide();}.bind(this));
    }

I pay attention to the line e.stopPropagation(); , without it, the first click(.one) happened immediately after the declaration.

events: {
      'click': function(e) {
        this.countriesDropDownListView.toggleList(e);
      }
    }