Question

我有这两个脚本。当只有第一个按钮动画时，但是由于我添加了第二个按钮，它开始做它想做的事情（显示菜单），但图标停止动画。

CSS：

#header {

background-color:rgba(255, 255, 255, 1);    
width:100%;
height:52px;
position: fixed;
top:0;
left:0px;
z-index:9100;
box-shadow: 0px 0.7px 4px rgba(0, 0, 0, .4);    
}



#header ul {
list-style: none;   
margin:0px;
padding:0px;
width:100%; 
margin-left:-10px;
position:relative;
}


#aaaaa{
    width:100%;}


#header li {
display: inline-block;
padding-left:1px;
margin-top:-3px;    
float:right;
margin:12px 20px 0px 5px;
}

.menua {  

color:rgb(100,100,100);
text-decoration:none;
font-size:22px;
font-family:futuraa;
display: inline-block;
padding-bottom: 3px;
}


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

.bar1 {
width: 35px;
height: 3px;
background-color: red;
margin: 6px 0;
transition: 0.4s;   
}

.bar2  {
width: 35px;
height: 3px;
background-color:limegreen;
margin: 6px 0;
transition: 0.4s;
}   

.bar3 {
width: 35px;
height: 3px;
background-color: blue;
margin: 6px 0;
transition: 0.4s;
}
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
transform: rotate(-45deg) translate(-9px, 3px) ;
 }

.change .bar2 {opacity: 0;}

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





@media only screen and (max-width:760px){

#brat{display:none;}


}

HTML：

<div class="container" onclick="myFunction(this)">
              <div class="bar1"></div>
              <div class="bar2"></div>
              <div class="bar3"></div>
</div>

<ul id="brat">          
    <li><a href="../../../contact/index.html" id="kon" 
         class="menua">Контакти</a></li>
    <li><a href="#ikoni" id="za" class="menua">За Нас</a></li>
    <li><a href="../../../index.html" id="za1" 
          class="menua">Начало</a></li>
    <li><a href="../../../categories/1/index.html" id="pro" 
         class="menua">Секционни шкафове</a></li>
</ul>

脚本：

<script>
function myFunction(x) {
x.classList.toggle("change");
}
</script>

<script>    
function myFunction() {
var x = document.getElementById("brat");
if (x.style.display === "block") {
    x.style.display = "none";
} else {
    x.style.display = "block";
}
}
</script>

所以这是大部分代码。如果你能告诉我我应该改变什么，那你怎么看我不是很擅长javascript

Answer 1

Javascript不支持方法重载，因此如果您使用2个不同的参数定义2个方法，则第二个方法将覆盖第一个方法。

要解决您的问题，您需要重命名第二种方法，如：

<script>    
function myFunction2() {
    var x = document.getElementById("brat");
    if (x.style.display === "block") {
        x.style.display = "none";
    } else {
        x.style.display = "block";
    }
}
</script>

您可能还需要调用这两个函数：

onclick="myFunction(this); myFunction2();"

汉堡JavaScript按钮一个代码阻止其他人工作

1 个答案: