如何让我的响应式图标响应？

Question

I have some jquery script in my html to make my navbar responsive, but it's not... responding.我的 html 中有一些 jquery 脚本可以使我的导航栏响应，但它没有...响应。 I click on the icon and it does nothing.我单击该图标，它什么也没做。 Anyone have any idea where I'm being stupid with this?任何人都知道我在哪里愚蠢吗？



> <!DOCTYPE html>
> <html lang="en">
> <head>
>     <meta charset="UTF-8">
>     <meta http-equiv="X-UA-Compatible" content="IE=edge">
>     <meta name="viewport" content="width=device-width, initial-scale=1.0">
>     <link rel="stylesheet" href="logohome.css">
>     <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
>     <title>logo</title>
> </head>
> <body>
>     <nav>
>         <div class="logo">
>             <a href="#"><img src="logo.svg" alt="Gjallahar logo"></a>
>         </div>
>         <div class="toggle">
>             <a href="#"><ion-icon name="menu-outline"></ion-icon></a>
>         </div>
>         <div>
>             <ul class="menu">
>                 <li><a href="#">HOME</a></li>
>                 <li><a href="#">WORLD</a></li>
>                 <li><a href="#">FACTIONS</a></li>
>                 <li><a href="#">POLITICS</a></li>
>                 <li><a href="#">MAGIC</a></li>
>             </ul>
>         </div>
>     </nav>
> 
>     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js">
> 
>             $(function(){
>                 $(".toggle").on("click", function(){
> if($(".menu").hasClass("active")){
>                         $(".menu").removeClass("active");
>                         $(this).find(a).html("<ion-icon name='menu-outline'></ion-icon>");
> else {
>                         $(".menu").addClass("active");
>                         $(this).find(a).html("<ion-icon name='close-outline'></ion-icon>");
>                     }
>                 });
>             });
> 
> 
>     </script>
> </body>
> </html>
> ```


CSS:

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

a, a:hover{
    text-decoration: none;
}

.head{
    height: 1rem;
    background-color: black;
}

.logo img{
    width:80px;
    margin-right: 10px;
}

nav{
    background-color: crimson;
    /*add background*/
    padding: 5px 20px;
    display: flex;
    align-items: center;
}

.logo{
    flex: 1;
}

.menu{
    display: flex;
    align-items: center;
    list-style: none;
    
}

.menu li{
    padding: 15px 10px;
    font-size: 16px;
}

.toggle{
    display: none;
}

@media screen and (max-width: 600px) {
    nav{
        display: block;
        position: relative;
        padding: 1rem 1.5rem;
    }

    .menu{
        margin-top: 1rem;
        display: none;
    }
}

.menu.active, .toggle{
    display: block;
}

.toggle{
    position: absolute;
    top:15px;
    right: 20px;

}

I tried everything I know but I know nothing about JS.我尝试了我所知道的一切，但我对 JS 一无所知。 I expected the menu to drop down after I clicked it, but no.我希望菜单在我单击后会下拉，但没有。

Answer 1

I have implemented something using JavaScript without JQuery which may help to identify where your code has an error.我已经在不使用 JQuery 的情况下使用 JavaScript 实现了一些功能，这可能有助于确定您的代码哪里有错误。 I replaced your ionicon with ... Click it!我用...替换了你的 ionicon 点击它！

 const toggle = document.querySelectorAll('.toggle'); const menu = document.querySelectorAll('.menu'); toggle[0].addEventListener('click', function(event){ if(menu[0].classList.contains('active')){ menu[0].classList.remove('active'); return; } else { menu[0].classList.add('active'); } });

 .menu { display: none; }.active { display: block; }

 <div class="logo"> <a href="#"><img src="logo.svg" alt="Gjallahar logo"></a> </div> <div class="toggle"> <a href="#">...</a> </div> <div> <ul class="menu"> <li><a href="#">HOME</a></li> <li><a href="#">WORLD</a></li> <li><a href="#">FACTIONS</a></li> <li><a href="#">POLITICS</a></li> <li><a href="#">MAGIC</a></li> </ul> </div>

如何让我的响应式图标响应？

问题描述

1 个解决方案

解决方案1
0 2022-11-15 23:10:34

如何让我的响应式图标响应？

问题描述

1 个解决方案

解决方案1 0 2022-11-15 23:10:34

解决方案1
0 2022-11-15 23:10:34