I'm trying to write a simple JQuery function in order to animate my mobile navigation. However, I'm not sure how to format the .js file. I've looked up some examples online, but I couldn't get my function to work, when I tried to use the example templates. Here's what I'm currently using, which works in Chrome, but FireFox logs an error, which I'll also post below:

My code:

(function ($, Drupal) {
        $( '#mobile-menu-toggle-button' ).click(function(){
          $( '.mobile-menu-toggle' ).toggleClass( "open" );
        $( '.overlay' ).click(function(e){
          if(e.target != this) return;
          $( '.mobile-menu-toggle' ).toggleClass( "open" );
})(jQuery, Drupal);

FireFox errors:

ReferenceError: Drupal is not defined

I'm thinking my formatting is off. Any help would be greatly appreciated.

  • 1
    Does your library have core/drupal as a dependancy? – Clive Jul 24 '17 at 15:49
  • @Clive yes, dependencies: - core/jquery - core/jquery.once – Kellen Jul 24 '17 at 15:59
  • So...by "yes" you mean "no" then? :) – Clive Jul 24 '17 at 16:01
  • @Clive Lol. I apologize. I definitely misread your comment. That was it! Thanks! This is my first D8 project, so I'm learning the ropes. If you put your response in as an answer, I'll give you the credit. – Kellen Jul 24 '17 at 16:39

D8 makes fewer assumptions about what you need in the page, so the Drupal JS library isn't included unless it's specified.

Just add

- core/drupal

as one of your library's dependancies, rebuild the cache, and all should be well.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.