Question

在HTML页面上显示某些行的最简单方法是什么？在点击时展开（和折叠）？

背景：我正在使用一个定制的CMS，我可以粘贴HTML，也可以编辑CSS。但是我无法添加特殊库。

我遇到的问题是，当我点击展开时，浏览器会转到屏幕顶部而不是保持原位。

我的代码大致如下：

  <body>

  <script type="text/javascript">

  function toggleView(id, link) {
    var e = document.getElementById(id);

    if (e.style.display == '') {
      e.style.display = 'none';
      link.innerHTML = '(+)';
    } else {
      e.style.display = '';
      link.innerHTML = '(-)';
    }
  }

  </script>

  <br>
  <br>
  <br>
  <br>
  <br>

  This is my headline <a href="#" onclick="toggleView('content', this)">(+)</a>

  <div id="content" style="display:none">
  This is my detailed content Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc fermentum.
  </div>

  <br>
  <br>
  <br>
  <br>
  <br>
  &nbsp;

  </body>

这可以在纯CSS中完成，还是使用Javascript更好？

抱歉新手问题，但我在其他地方找不到答案。

Ĵ

Answer 1

这可以使用JQuery轻松完成。

$("#content").slideToggle();

Answer 2

您可以使用以下代码：

href="javascript:void(0);"

而不是：

href="#"

但这是一个更简单的例子！

<div class="example2">
    <p>Text Here.</p>
</div>

$(document).ready(function() {
    $('.example2').hide().before('<a href="#" id="toggle-example2" class="button">Open/Close</a>');
    $('a#toggle-example2').click(function() {
        $('.example2').slideToggle(1000);
        return false;
    });
});

的jsfiddle：

link

在HTML页面上展开/折叠行的最简单方法是什么？

2 个答案: