javascript - 如何制作显示/隐藏部分的列表？

Question

对于我的网站，我正在制作一个显示/隐藏链接列表(java 脚本和 css)，并且我希望每个链接都有不同的内容。但是，当我尝试这样做时，第一个链接之后的显示/隐藏链接不起作用。有什么帮助吗？建议？谢谢!

function showHide(shID) {
   if (document.getElementById(shID)) {
      if (document.getElementById(shID+'-show').style.display != 'none') {
         document.getElementById(shID+'-show').style.display = 'none';
         document.getElementById(shID).style.display = 'block';
      }
      else {
         document.getElementById(shID+'-show').style.display = 'inline';
         document.getElementById(shID).style.display = 'none';
      }
   }
}

   .more {
      display: none;
   a.showLink, a.hideLink {
      text-decoration: none;
      color: #36f;
      padding-left: 8px;
      background: transparent url(down.gif) no-repeat left; }
   a.hideLink {
      background: transparent url(up.gif) no-repeat left; }

<a href="#" id="example-show" class="showLink" onclick="showHide('example');return false;"><span class="sec">Section 1-</span><span class="seccontent">site navigation</span></a>
      <div id="example" class="more">
<a href="#" id="example-hide" class="hideLink" onclick="showHide('example');return false;"><span class="sec">Section 1-</span><span class="seccontent">site navigation</span></a>
        <p>example content</p>
      </div>

<a href="#" id="example-show" class="showLink" onclick="showHide('example');return false;"><span class="sec">Section 2-</span><span class="seccontent">products</span></a>
      <div id="example" class="more">
<a href="#" id="example-hide" class="hideLink" onclick="showHide('example');return false;"><span class="sec">Section 2-</span><span class="seccontent">products</span></a>
        <p>stuffs</p>
      </div>
        

Answer 1

您不能使用具有相同 id 的两个元素。

用“Sec1”试一个，用“Sec2”试第二个

<a href="#" id="example-show" class="showLink" onclick="showHide('Sec1');return false;"><span class="sec">Section 1-</span><span class="seccontent">site navigation</span></a>
<div id="Sec1" class="more">
    <a href="#" id="example-hide" class="hideLink" onclick="showHide('Sec1');return false;"><span class="sec">Section 1-</span><span class="seccontent">site navigation</span></a>
    <p>example content</p>
</div>

<a href="#" id="A1" class="showLink" onclick="showHide('Sec2');return false;"><span class="sec">Section 2-</span><span class="seccontent">products</span></a>
<div id="Sec2" class="more">
    <a href="#" id="A2" class="hideLink" onclick="showHide('Sec2');return false;"><span class="sec">Section 2-</span><span class="seccontent">products</span></a>
    <p>stuffs</p>
</div>