2菜单javascript与echother冲突

Question

我有两个相互冲突的javascript菜单。它们正在打开彼此，就像在中一样，如果我单击1个菜单的菜单按钮，它将打开另一个菜单。这是两个菜单的javascript，所以问题是，我如何才能让它们不互相干扰？

这是新的javascript，当我添加这个javascript时，它开始干扰现有的javascript菜单。

这是第一个javascript 的菜单

<div class="topnavmem" id="myTopnavmem">
<a href="#">Link</a>
<a href="#">link1</a>
<a href="#">link2</a>
<a href="#">link3</a> 
<a href="#">link4</a> 
<a href="javascript:void(0);" class="iconmem" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>

<script>
function myFunction() {
var x = document.getElementById("myTopnavmem");
if (x.className === "topnavmem") {
x.className += " responsivemem";
} else {
x.className = "topnavmem";
}
}
</script>

这是现有的javascript菜单，是旧菜单，然后我在上面添加了新的javascript菜单它开始干扰这个脚本，所以我如何使每个javascript不同，我认为问题是myfunction？

这是第二个javascript 的菜单

<div class="topnav">
<div id="myLinks">
<a href="#" style="background: #243144;padding: 6px 16px;">Link</a>
<div id="topnav-subnav">       
<a href="#">Link</a> 
</div>
<a href="#" style="background: #243144;padding: 6px 16px;">Link</a>
<div id="topnav-subnav">       
<a href="#">Link</a>   
</div>
<a href="#about" style="background: #243144;padding: 6px 16px;">Link</a>
<div id="topnav-subnav">       
<a href="#">Link</a>
</div>
<a href="# style="background: #243144;padding: 6px 16px;">Link</a>
<div id="topnav-subnav">       
<a href="#">Link</a>     
</div>
</div>
<a href="javascript:void(0);" class="topnavicon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>

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

Answer 1

两个函数使用相同的名称。您需要给它们不同的名称，理想情况下，这些名称应该比myFunction更具描述性。

因此，您可以将第二个代码更改为

<a href="javascript:void(0);" class="topnavicon" onclick="topNavFunction()">
<i class="fa fa-bars"></i>
</a>
<script type="text/javascript">
function topNavFunction() {
var x = document.getElementById("myLinks");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
</script>