2 菜單 javascripts 與 echother 沖突

Question

我有 2 個相互沖突的 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>

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

這是現有的 javascript 菜單，它是舊菜單，然后我在它上面添加了新的 javascript 菜單開始干擾這個腳本，所以我怎樣才能讓每個 javascript 不同，我認為問題是？

這是第二個 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>