时间戳

首页 > 解决方案 > 重置为代码 JAVASCRIPT 中的自定义前一点

javascript - 重置为代码 JAVASCRIPT 中的自定义前一点

问题描述

我正在构建一个响应式移动菜单。我是初学者，所以不知道如何有效地使用循环。

问题是当在移动视图中时，汉堡菜单图标显示，当它被点击时，它会变成关闭菜单图标，当再次点击时，会变成汉堡菜单。但它卡在那里。它只适用于 2 次点击，之后它会粘在汉堡菜单图标上，并且永远不会更改为关闭菜单图标。

JAVASCRIPT代码：

window.addEventListener('resize', function detectWidth(){

    let screenWidth = screen.width;
    
    if(screenWidth <= 800){
    
        document.querySelector("nav ul").innerHTML = `<img id="menuIcon" src="Header/menuIcon.png" alt="Menu Icon">`;
        
        // TO SHOW MENU ITEMS & CLOSE MENU ICON AFTER CLICKING ON HAMBURGER MENU BUTTON
        document.querySelector("#menuIcon").addEventListener("click", function(){
            document.querySelector("#menuIcon").outerHTML = `<img id="closMenuIcon" src="Header/closeMenuIcon.png" alt="Close Menu Icon">`;
            

            //TO CHANGE BACK TO MENU ICON
            document.querySelector("#closMenuIcon").addEventListener("click", function () {
                    document.querySelector("#closMenuIcon").outerHTML = `<img id="menuIcon" src="Header/menuIcon.png" alt="Menu Icon">`;
            });
        })
    
    } else{
    
        document.querySelector("nav ul").innerHTML = `<ul>
                                                            <li><a href="#">Home</a></li>
                                                            <li><a href="#">Shop</a></li>
                                                            <li><a href="#">About us</a></li>
                                                            <li><a href="#">Contact us</a></li>
                                                        </ul>`;
    }
});

如果很明显，请原谅我，我是初学者，我认为它需要某种循环。

标签： javascriptcssloopsmenuresponsive

解决方案

尽管最好使用切换 css className，但我想指出这种情况下的问题。在您的情况下，您在按钮元素上应用事件，但事情是outerHTML 替换元素，因此所有事件都会被触发。如果你想坚持你的方法，你需要再次重新声明事件。

推荐阅读