Question

对于我的网站，我正在制作一个显示/隐藏链接列表（java脚本和CSS），我希望每个人都能说出不同的内容。但是，当我尝试这样做时，第一个之后的显示/隐藏链接不起作用。有帮助吗？建议？谢谢！

＆＃13;

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';
      }
   }
}

＆＃13;

   .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; }

＆＃13;

<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>

＆＃13;

Answer 1

你不能使用具有相同身份的两个元素。

使用“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>

Answer 2

如果您使用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>

DEMO

Answer 3

为了拥有相同的按钮并只更改文本，您可以应用此脚本：

$(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();
        }
    });

}）;

DEMO

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

3 个答案: