This article provides a solution to the issue of HTML buttons not reacting to JQuery. This issue can be caused by a variety of factors, such as incorrect syntax, incorrect HTML structure, or incorrect JQuery code. This article will provide a step-by-step guide to troubleshooting and resolving this issue. Additionally, it will provide some tips and best practices for avoiding this issue in the future.
The issue was that the buttons were not being selected correctly. The correct selector was:
$(‘button’).click(function(){
// Your code here
});
Make the class .active declaration the last line of your CSS file and it will work.
What is happening here is that the class .menu-inheader (the one you use on sub-buttons) have the same CSS specificity of the class .active, so the browser is using the last one declared in the .css file.
For more info on CSS Specificity calculation, see this MDN Article.
P.S.: Try to always include the code itself in the question, along with the demo link.