Javascript 2个菜单脚本与echother冲突

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

这是新的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>

<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>

函数myFunction（）{
var x=document.getElementById（“myTopnavmem”）；
如果（x.className==“topnavmem”）{
x、 className+=“responsivemem”；
}否则{
x、 className=“topnavmem”；
}
}

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

下面是第二个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>

<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>

函数myFunction（）{
var x=document.getElementById（“myLink”）；
如果（x.style.display==“块”）{
x、 style.display=“无”；
}否则{
x、 style.display=“block”；
}
}

两个函数的名称相同。您需要为它们指定不同的名称，理想情况下，这些名称应该比

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>

函数topNavFunction（）{
var x=document.getElementById（“myLink”）；
如果（x.style.display==“块”）{
x、 style.display=“无”；
}否则{
x、 style.display=“block”；
}
}

你是如何调用函数的？嘿，伙计，我修正了这个问题，并添加了函数，也许你现在可以看看了？你不能有两个同名的不同函数。给他们不同的名字。嘿，谢谢，问题是，你怎么给他们两个不同的名字，当我尝试时，我打破了剧本。给我看一次，我就会终身学习。