Here is the HTML:
The box class is just default styling. Any class of the form
.only-js-x will add class
.no-js-x will remove class
.no-js-x to work, class
.x must be part of the element.
Now for the JQuery (don't worry, there isn't too much of it)
There are two sections to this. The first half deals with
.only-js-x and the second half deals with
This applies the following function to each element that matches this selector, one at a time. The selector matches any element whose list of classes starts with
.only-js- or whose list of classes contains
.only-js-. The space ensures that it only matches elements with classes which start with
The first line gets the string containing the class names. The second line splits it into an array, one class name per element of the array. The third line loops through each class name in the array.
If a class name starts with
.only-js-, then class
.x is added to the currently selected element, as in
substring() call inside the
addClass() call retrieves the second half of the class name, the half containing the class name to add.
The second half of JQuery is identical to the first, except it looks for
.no-js-x. When it has a match, it removes class
.x from the element.
.has-dropdown and nothing happening can be very confusing to a user without JS. So instead, I will add the class
.only-js-has-dropdown to the menu item, which will ensure the extra styling is applied only when it is functional.