Question

我需要复制这种效果： http://results.glasgow2014.com/PDIS/PDIS_WL.html

当您单击各个表时，它们将展开并显示内容。

我认为这是一个非常基本和常见的事情。

我尝试使用“show more / click to expand”样式jQuery，但这只适用于纯文本。我无法将其实现到表结构中。

有什么好处呢？

Answer 1

我可以建议使用jQuery UI Accordion

显示可折叠内容面板，用于显示信息有限的空间。

以下是其中一个示例，您可以如何使用它：

(function($) {

  var allPanels = $('.accordion > dd').hide();

  $('.accordion > dt > a').click(function() {
    $this = $(this);
    $target = $this.parent().next();

    if (!$target.hasClass('active')) {
      allPanels.removeClass('active').slideUp();
      $target.addClass('active').slideDown();
    }

    return false;
  });

})(jQuery);

.accordion {
  margin: 50px;
}
.accordion dt,
.accordion dd {
  padding: 10px;
  border: 1px solid black;
  border-bottom: 0;
}
.accordion dt:last-of-type,
.accordion dd:last-of-type {
  border-bottom: 1px solid black;
}
.accordion dt a,
.accordion dd a {
  display: block;
  color: black;
  font-weight: bold;
}
.accordion dd {
  border-top: 0;
  font-size: 12px;
}
.accordion dd:last-of-type {
  border-top: 1px solid white;
  position: relative;
  top: -1px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<dl class="accordion">

  <dt><a href="">Panel 1</a></dt>
  <dd>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</dd>

  <dt><a href="">Panel 2</a></dt>
  <dd>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</dd>

  <dt><a href="">Panel 3</a></dt>
  <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo,
    eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.</dd>

</dl>

使用jQuery推出表？

1 个答案: