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

Question

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

问题是，在移动视图中，汉堡菜单图标显示，单击它时，它变为关闭菜单图标，再次单击时，变为汉堡菜单。但它卡在那里。它仅适用于 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>`;
    }
});

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

Answer 1

我自己找到了答案。我真的不知道它是如何工作的，但是是的，至少它现在可以工作了。

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
        function toggleMenu(){
            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">`;
                        toggleMenu();
                });               
            })
        }
        toggleMenu();
        
    
    } 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>`;
    }
});

Answer 2

尽管使用切换 css className 更好，但我想指出这种情况下的问题。在您的案例场景中，您在按钮元素上应用了事件，但事情是 outerHTML replaces the element 所以所有事件都会被触发。如果你想坚持你的方法，你需要重新声明一次事件。

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

Reset to a custom previous point in the code JAVASCRIPT

javascript

css

loops

menu

responsive