Menu icon Foundation
How to override default JS

Hey all. Just started using Foundation again and am a bit perplexed. I want to prevent the closeme function from firing automatically when opening dropdowns. I have a couple pages where I want the users to be able to open more than one dropdown. 

I am not interested in trying a different approach since this question can apply to any scenario where we want to alter the default behavior of Foundation.

The function in question gets fired on line 4916 of app.js when building the advanced template of Foundation 6.5.3

4912   /**
4913   * Fires to close other open dropdowns, typically when dropdown is opening
4914   * @event Dropdown#closeme
4915   */
4916   this.$element.trigger('closeme.zf.dropdown', this.$element.attr('id'));

I have tried commenting the line out in the following places but nothing propagates past a build.

node_modules
|----foundation-sites
|    |----dist
|         |----js
|              |----plugins
|                   |----foundation.dropdown.js
|              |----foundation.js
|    |----js
|         |----foundation.dropdown.js
|         |----entries
|              |----plugins
|                   |----foundation.dropdown.js

It really should be easy to do this and it probably is. What am I not doing? 

 

PS - editing the line in app.js in the dist folder is not an option since every time a build happens it overwrites.

overridejavascriptdropdown

Hey all. Just started using Foundation again and am a bit perplexed. I want to prevent the closeme function from firing automatically when opening dropdowns. I have a couple pages where I want the users to be able to open more than one dropdown. 

I am not interested in trying a different approach since this question can apply to any scenario where we want to alter the default behavior of Foundation.

The function in question gets fired on line 4916 of app.js when building the advanced template of Foundation 6.5.3

4912   /**
4913   * Fires to close other open dropdowns, typically when dropdown is opening
4914   * @event Dropdown#closeme
4915   */
4916   this.$element.trigger('closeme.zf.dropdown', this.$element.attr('id'));

I have tried commenting the line out in the following places but nothing propagates past a build.

node_modules
|----foundation-sites
|    |----dist
|         |----js
|              |----plugins
|                   |----foundation.dropdown.js
|              |----foundation.js
|    |----js
|         |----foundation.dropdown.js
|         |----entries
|              |----plugins
|                   |----foundation.dropdown.js

It really should be easy to do this and it probably is. What am I not doing? 

 

PS - editing the line in app.js in the dist folder is not an option since every time a build happens it overwrites.

Mary Williams 4 months ago

Hi James , just try by writing internal JS you can override default Java Script codes, ex- if you have a HTML file and you are using external JS file, then you can write inline JS code in the same HTML file.