下面是代碼，問題描述和問題緊隨其后。

function showOrHideMenu(menuId) {
  // alert(menuId);
  var menu = document.getElementById(menuId);
  // alert(menu);
  var isVisible = menu.style.visibility;
  // alert(isVisible);

  if ((isVisible === 'hidden') || (isVisible === '')) {
    // alert(menu1);
    menu.style.visibility = 'visible';
    menu.style.width = '75vw';
    // alert("passe 1 bis");        
  } else {
    // alert("passe 2");
    menu.style.visibility = 'hidden';
    // alert("passe 2 bis");
  }
}

@media (min-width: 800px) {
  .css_menu_1 {
    visibility: visible;
    font-size: 1.3rem;
    background-color: goldenrod;
  }
}

<img src="../images/hamburger_menu_icon.png" alt="Display or hide menu 1" class="css_btn_menu_1" id="btn_menu_1" onclick="showOrHideMenu('menu_1');">

當(dāng)您使用javascript更改樣式時，它會將內(nèi)聯(lián)樣式添加到元素中。內(nèi)聯(lián)樣式會覆蓋任何東西，這會導(dǎo)致覆蓋CSS媒體查詢中定義的樣式。

在這種情況下，當(dāng)菜單可見時，您可以完全移除內(nèi)聯(lián)樣式。

function showOrHideMenu(menuId) {
  var menu = document.getElementById(menuId);

  if (menu.style.visibility === 'hidden' || menu.style.visibility === '') {
    menu.style.visibility = 'visible';
    menu.style.width = '75vw';
  } else {
    menu.style.visibility = '';
    menu.style.width = '';
  }
}

或者您可以添加一個類& quot活動& quot并相應(yīng)地更改樣式:

function showOrHideMenu(menuId) {
  var menu = document.getElementById(menuId);

  if (menu.style.visibility === 'hidden' || menu.style.visibility === '') {
menu.classList.add('active');
  } else {
menu.classList.remove('active');
  }
}

在css中，您還必須執(zhí)行以下操作:

.css_menu_1 {
  visibility: hidden;
  width: 0;
} 
.css_menu_1.active { 
  visibility : visible; 
  width: 75vw;
}