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

让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更好?

不好意思，我在别处找不到答案。

这可以使用JQuery轻松完成。

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

您可以使用:

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:

链接

相关内容

最新更新

热门标签：