How to Replace jQuery Class Toggling with Pure JavaScript?

Pure JavaScript Alternative for jQuery Class Toggling

Problem:
Converting a jQuery code that toggles class names for a responsive menu to pure JavaScript.

Solution:

Option 1:

• Utilize the classList.toggle() method, which is supported by most modern browsers.

<code class="javascript">var menu = document.querySelector('.menu');
menu.classList.toggle('hidden-phone');</code>

Option 2 (Older Browsers):

• Employ the classList.js library to enable the classList.toggle() functionality.

<code class="javascript">// Install classList.js using your preferred package manager.
var menu = document.querySelector('.menu');
menu.classList.toggle('hidden-phone');</code>

Additional Note:

• It is recommended to use classes instead of IDs for better encapsulation and to avoid polluting the global namespace.

The above is the detailed content of How to Replace jQuery Class Toggling with Pure JavaScript?. For more information, please follow other related articles on the PHP Chinese website!