单击 html 中的动画图标后，如何使菜单出现？

Question

我正在制作一个网站，我有一个可以设置动画的图标（从 3 个小节变为一个 x）。 但是，单击它后，我似乎无法在其下方显示菜单。

我试过：添加一个 if 语句，以便在单击图标时出现菜单。

添加一个菜单按钮，然后在容器内添加链接。

但似乎没有任何效果。

这是我的代码：

<!DOCTYPE html>
<body>
<head>
<title>JJ's Contracting Services.com</title>
<style>
 h1 {
     position: absolute;
     top:0;
     left:16px;
 }
 .header  {
     width:auto;
     padding: 200px;
     color: white;
     background-image: url(https://ak6.picdn.net/shutterstock/videos/1022525326/thumb/1.jpg);
     background-position: center top;
   }


 img {
     z-index: -1;
     vertical-align: text-top;
     top:0;
     width:100%;
     height:200px;   
 }

 .container {
    display: inline-block;
    cursor: pointer;
    position:absolute;
    right:30px;
    top:10;
 }

 .bar1, .bar2, .bar3 {
    width: 35px;
    height: 5px;
    background-color: white;
    margin: 6px 0;
    transition: 0.4s;

 }

 .change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px);
    transform: rotate(-45deg) translate(-9px, 6px);
 }

 .change .bar2 {opacity:0;}

 .change .bar3 {
     -webkit-transform: rotate(45deg) translate(-8px, -8px);
      transform: rotate(45deg) translate(-8px, -8px);
 }

     @media only screen and (max-width:600px) {
        .header  {
            width:100%;
         }
     }

 </style>
 <div class= "header">

 <h1>JJ's Contracting Services</h1>


 </div>
 <div class = "container" button onclick="myFunction(this)">   
     <div class = "bar1"> </div>                  
     <div class = "bar2"> </div>
     <div class = "bar3"> </div>  
 </div>  
 <script>
     function myFunction(x) {
        x.classList.toggle("change");             
     }    
 </script>

</html>

Answer 1

与您的代码一样， change类将使菜单。 您可以通过以下方式轻松切换 jquery 中的更改类。

<script>
    $(document).ready(function(){
        $('.container').click(function(){
            $('#menu').toggleClass('change')
         }
    })
</script>

但是对于这项工作，您应该创建一个带有 id #menu的 div，以便 jquery 并使用它来切换类。

<div class= "header">
    <h1>JJ's Contracting Services</h1>
</div>
<div class = "container" button onclick="myFunction(this)">
    <div class = "bar1"> </div>                  
    <div class = "bar2"> </div>
    <div class = "bar3"> </div>  
</div>
<div id="menu"></div>

不要使用汉堡菜单类（3 行按钮）来切换，因为它将按钮转换为菜单。 它不会好看。

单击 html 中的动画图标后，如何使菜单出现？

问题描述

1 个解决方案

解决方案1
0 2020-03-26 04:39:16

单击 html 中的动画图标后，如何使菜单出现？

问题描述

1 个解决方案

解决方案1 0 2020-03-26 04:39:16

解决方案1
0 2020-03-26 04:39:16