javascript - 使用 javascript 显示/隐藏 div

Question

我有一个菜单，单击时应显示在 div 中组织的子元素。

我在下面提供了 html 的结构

function showOrHide() {
  if (window.innerWidth < 800) {

    var div = document.getElementById("links");
    if (div.style.display == "block") {
      div.style.display = "none";
    } else {
      div.style.display = "block";
    }
  }
}

<li>
  <div id="image" onclick="showOrHide()">
    <span>Test1</span>
  </div>
  <div id="links">
    <span>Test2</span>
  </div>
</li>
<li>
  <div id="image" onclick=" showOrHide()">
    <span>Test3</span>
  </div>
  <div id="links">
    <span>Test4</span>
  </div>
</li>

我希望在单击 div id="image" 时显示或隐藏 div id="links"。我有以下 JavaScript。

我面临的问题是 onclick javascript 显示菜单中的所有 div id=links ，我只想显示 div 图像旁边的 div 链接。例如，当我单击 Test1 时，仅应显示 Test2。

Answer 1

元素 ID 在整个文档中应该是唯一的。

您必须尝试为每个 div 创建唯一的 id。

function showOrHide(rowNum) 
{ if (window.innerWidth < 800) { 

    var div = document.getElementById("links_"+ rowNum);
    if (div.style.display == "block") 
    {
        div.style.display = "none";
    }
    else 
    {
        div.style.display = "block";
    }
}
}

<li>
<div id="image_1" onclick="showOrHide(1)">
<span>Test1
</span></div>
<div id="links_1">
<span >Test2</span>
</div></li>
<li>
<div id="image_2" onclick=" showOrHide(2)">
<span>Test3
</span></div>
<div id="links_2">
<span >Test4</span>
</div></li>