I am facing an issue with the hamburger icon on my website. The toggle functionality associated with it is not working properly. Even though I have a class named change-1 that should be toggled upon clicking the icon, it is not happening. There are no error messages showing up in the console either. Can anyone help diagnose the problem in this code?
function Main() {}
Main.prototype = {
// Function to initialize preloading
initPreloading: function() {
window.addEventListener("load", function() {
document.body.classList = "loaded";
});
document.querySelector(".block.hero").addEventListener("click", this.particleRibbons());
},
// Function to create particle ribbons
particleRibbons: function() {
// Code for creating particle ribbons
},
// Function to initialize miscellaneous tasks
initMisc: function() {
window.addEventListener("resize", this.particleRibbons);
},
// Function to handle hamburger icon click event
navIcon: function() {
$(".hamburger-icon").on("click", function() {
$(".one").toggleClass("change-1");
});
},
// Function to initialize everything
init: function() {
Main.initPreloading(), Main.particleRibbons(), Main.initMisc(), Main.navIcon();
}
};
var Main = new Main;
Main.init();
/* CSS code snippet */
@media (max-width: 768px) {
/* CSS code specific to smaller screens */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body class="loading">
<div class="site-wrapper">
<div class="site-main fullpage">
<section data-id="hero" class="block hero" style="margin-top:0;padding:0">
<div class="hamburger-icon">
<div class="burger one"></div>
<div class="burger tikki"></div>
<div class="burger two" style="margin-bottom: 0;"></div>
</div>
<canvas class="hero__canvas" id="canvas__particles" data-bg-color="#232323"></canvas>
<div class="block__content vertical-align-helper text-align-center">
<div class="vertical-align-middle">
<h1 class="name">Chirag <span>Bhansali</span></h1>
<h3 class="subtitle">Front-End Web Developer</h3>
</div>
</div>
</section>