js有没有同时做两件事的函数？

Question

我正在尝试将此 js 脚本更改为按如下方式工作：我需要隐藏另一个部分，并且同一按钮会同时显示已经工作的部分。

有人能给我指出正确的方向吗？我很想知道将什么放入 JS，因为我是一个完全的编码菜鸟，不知道自己该如何解决它。

function showStores() {
  var x = document.getElementById("allstores");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

<button onclick="showStores()">See All Stores</button>

<div id="allstores">All stores</div>

Answer 1

切换隐藏

也使用推荐的 addEventListener 而不是内联点击

document.getElementById("toggle").addEventListener("click",function() {
 
  const x = document.getElementById("allStores");
  const y = document.getElementById("someStores");
  
  x.hidden = !x.hidden
  y.hidden = !y.hidden
  this.innerText = x.hidden ? 'See all stores' : 'See some stores'
})

<button type="button" id="toggle">See All Stores</button>

<div id="allStores" hidden>All stores</div>
<div id="someStores">Some stores</div>

如果你不喜欢 .hidden 你可以使用 class

document.getElementById("toggle").addEventListener("click",function() {
 
  const x = document.getElementById("allStores");
  const y = document.getElementById("someStores");
  x.classList.toggle("hide")
  y.classList.toggle("hide")
  this.innerText = x.classList.contains("hide") ? 'See all stores' : 'See some stores'
})

.hide { display: none; }

<button type="button" id="toggle">See All Stores</button>

<div id="allStores" class="hide">All stores</div>
<div id="someStores">Some stores</div>

js有没有同时做两件事的函数？

Is there a function to do two things at same on js?

html

javascript

button