Question

按下按钮后，我试图使某些东西不可见。问题是我想同时定位多个目标。

所以我不能使用： document.getElementById("targ").style.visibility = "hidden";

因为它只定位4个元素中的1个。

我尝试使用： `document.getElementsByClassName（“ targ”）。style.visibility =“ hidden”;

        <div id="navbar" class="sticky">
            <li><a href="#top" style="padding:0px" id="targimg"><img src="act_logo.png"></a></li>
            <li><a href="#description" class="targ">Description</a></li>
            <li><a href="#video" class="targ">Video</a></li>
            <li style="float:right" class="targ"><a href="#top">Top</a></li>
            <li><a href="#explication" class="targ">Explication</a></li>
            <li><a><span style="font-size:20px;cursor:pointer" onclick="openNav()">&#9776; open</span></a></li>
        </div>

<script>
function openNav() {
                document.getElementById("mySidenav").style.width = "250px";
                document.getElementsByClassName("targ").style.visibility = "hidden";
                document.getElementById("targimg").style.textAlign = "center";
            }
</script>

`

但这无法更改可见性。我收到错误消息：Uncaught TypeError：无法在以下位置设置undefined的属性“ visibility”（然后在这里找到我的函数名）

Answer 1

您需要循环document.getElementsByClassName（“ targ”）的结果。

document.getElementsByClassName("targ").forEach(e => e.style.visibility = "hidden");

Answer 2

如何切换<li>元素容器的可见性而不是直接定位它们：

window.addEventListener('DOMContentLoaded', () => {
  document.querySelector('.menu-trigger').addEventListener('click', (event) => {
    event.stopPropagation();
    event.preventDefault();

    openNav();
  });
});

function openNav() {
  // document.getElementById("mySidenav").style.width = "250px";

  const menuEl = document.querySelector('.menu');
  menuEl.classList.toggle('menu-off');

  // document.getElementById("targimg").style.textAlign = "center";
}

.menu-off {
  visibility: hidden;
  opacity: 0;
}

<div id="navbar" class="sticky">
  <ul class="menu">
    <li>
      <a href="#top" style="padding:0px" id="targimg"><img src="act_logo.png"></a>
    </li>
    <li><a href="#description" class="targ">Description</a></li>
    <li><a href="#video" class="targ">Video</a></li>
    <li style="float:right" class="targ"><a href="#top">Top</a></li>
    <li><a href="#explication" class="targ">Explication</a></li>
  </ul>

  <a class="menu-trigger">
    <span style="font-size:20px;cursor:pointer">&#9776; open</span>
  </a>
</div>

Answer 3

由于通过类名获取元素会产生一个列表，因此需要通过遍历列表将样式分别添加到每个元素中。我还建议将targ类赋予li标记而不是锚，因为隐藏锚仍然会使列表项带有项目符号：

function openNav() {
  // document.getElementById("mySidenav").style.width = "250px";
  targList = document.getElementsByClassName("targ");
  document.getElementsByClassName("targ")
  if (targList) {
    for (var x = 0; x < targList.length; x++) {
      targList[x].style.visibility = "hidden";
    }
  }
  document.getElementById("targimg").style.textAlign = "center";
}

<div id="navbar" class="sticky">
  <li>
    <a href="#top" style="padding:0px" id="targimg"><img src="act_logo.png"></a>
  </li>
  <li><a href="#description" class="targ">Description</a></li>
  <li><a href="#video" class="targ">Video</a></li>
  <li style="float:right" class="targ"><a href="#top">Top</a></li>
  <li><a href="#explication" class="targ">Explication</a></li>
  <li><a><span style="font-size:20px;cursor:pointer" onclick="openNav()">&#9776; open</span></a></li>
</div>

未捕获的TypeError：无法设置未定义的属性“可见性”

3 个答案: