为按钮创建脚本以在打开其自己的部分时关闭其他部分

Question

这很难准确解释。但我们开始：我有一个调用函数的按钮

<button onclick="myFunction_gsm()">Men</button>

按下按钮时，会触发脚本。该脚本抓取一个隐藏部分并显示它。脚本是这样的：

    <script>
//Gender Selection Script Men//
    function myFunction_gsm() {
  var x = document.getElementById("men-sizing");
  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }

}
</script>

在屏幕上，您单击该按钮，会出现一个部分，如果我再次单击同一个按钮，该部分将再次隐藏。但是，我还有另外两个部分。共3节。对于此示例，上述脚本适用于 1 个部分，即 A 部分。还有 B 和 C。我想包括按下 A 时的行为，因此显示 A 部分，如果我然后按下 B 的按钮B 部分出现，但 A 部分消失，无需再次按下 A 按钮。 各种动态变化。

我是编码的完全入门者，但我认为这是您添加到 if 语句中的内容。任何帮助将不胜感激。

我更喜欢包含我现在拥有的代码的解决方案，因为从头开始重新创建它没有多大用处。它会解决这个问题，但会导致许多新问题。

Answer 1

为所有部分定义一个class，例如sec。单击事件传递所选 id，隐藏所有这些并仅切换所选的一个。

function myFunction_gsm(sectionId) {
  let sec = document.querySelectorAll('.sec');
  sec.forEach(itm => {
    if(itm.id !== sectionId) itm.style.display = 'none'
  })
  var x = document.getElementById(sectionId);
  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
}

let sec = document.querySelectorAll('.sec');
sec.forEach(itm => {
  itm.style.display = 'none'
})

<button onclick="myFunction_gsm('sec1')">Sec1</button>
<button onclick="myFunction_gsm('sec2')">Sec2</button>
<button onclick="myFunction_gsm('sec3')">Sec3</button>

<div class="sec" id="sec1"> some text 1 here</div>
<div class="sec" id="sec2"> some text 2 here</div>
<div class="sec" id="sec3"> some text 3 here</div>

Answer 2

您可以为这些部分使用 class 名称。然后在函数的开头隐藏所有具有 class 名称的元素，然后显示当前单击的元素。如果你想保留该部分的切换功能（因此单击 A 两次显示并再次隐藏它），你想在隐藏所有之前先检查当前单击的显示状态。然后只显示之前隐藏的点击的。

Answer 3

现代方法是避免在 JS 中使用 .style。这将 stylign 添加为内联样式，它具有最高的特异性权重 important。现代解决方案是使用 classList 来应用、删除或切换 CSS-Class.

您将 class 添加到 CSS 以隐藏元素，例如： .display-none { display: none; }`
然后通过添加步骤 1 中提到的 class 向按钮添加一个功能以隐藏具有特定 class 的所有部分：function hideAll() { document.querySelectorAll('.class-name').forEach(el => el.classList.add('display-none')); }
您通过删除 class 向某个元素的按钮的 onclick 触发器添加第二个函数：element.classList.remove('display-none');

function hideAll() {
  document.querySelectorAll('.section').forEach(el => el.classList.add('display-none'));
}

function showA() {
  document.querySelector('#section-a').classList.remove('display-none');
}

function showB() {
  document.querySelector('#section-b').classList.remove('display-none');
}

function showC() {
  document.querySelector('#section-c').classList.remove('display-none');
}

.display-none {
  display: none;
}

<button onclick="hideAll(); showA()">Show A</button>
<button onclick="hideAll(); showB()">Show B</button>
<button onclick="hideAll(); showC()">Show C</button>

<section id="section-a" class="section display-none">Section A</section>
<section id="section-b" class="section display-none">Section B</section>
<section id="section-c" class="section display-none">Section C</section>

CSS-仅解决方案

如果您不想起诉脚本，您可以使用通过 :target 选择器工作的纯 CSS-方法。这允许您使用锚点作为“触发器”。

通过直接选择它们或向它们添加 class 来隐藏具有 display: none; 的部分。
使用带有 href="#id" 的锚而不是 link。这会将页面移动到该元素，但也会操纵网站地址。
使用*:target { display: block; }显示目标元素：

.display-none {
  display: none;
}

*:target {
  display: block;
}


/* for styling purpose only */
a {
  margin-right: 15px;
}

<a href="#section-a">Show A</a>
<a href="#section-b">Show B</a>
<a href="#section-c">Show C</a>

<section id="section-a" class="display-none">Section A</section>
<section id="section-b" class="display-none">Section B</section>
<section id="section-c" class="display-none">Section C</section>

为按钮创建脚本以在打开其自己的部分时关闭其他部分

Creating a script for a button to close other sections when opening its own sections

javascript

html

wordpress-theming

elementor