我如何制作显示/隐藏部分的列表

How can I make a list of show/hide sections?

本文关键字：列表 隐藏部 何制作 显示      更新时间：2023-09-26

对于我的网站，我正在制作显示/隐藏链接(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>

不能使用相同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>

如果你使用jQuery，那么试试toggleClass。

<html>
<head>
    <style>
        div {
            display: none;
        }
          div.active {
            display: block;
        }
    </style>
</head>
<body>
    <span id="clickMe">Click</span>
    <div>Hello World</div>

    <script>
        $(document).ready(function () {
            $('#clickMe').on('click', function () {
                $("div").toggleClass("active");
            });
        });
    </script>
</body>
</html>
演示

为了有相同的按钮，只是改变文本，你可以应用这个脚本:

$(document).ready(function () {
    $('#hide').on('click', function () {
        if ($('#par').is(':visible')) {
            $(this).text('Write me');
            $('#par').hide();
        } else {
            $(this).text("I don't want to write any message now.");
            $('#par').show();
        }
    });

});演示

相关文章：