javascript - 使用 jquery 切换幻灯片

Question

我有以下 javascript，它允许我的页面访问者单击链接并显示文章的全部内容，例如“阅读更多”，当您单击它时，整篇文章会显示在下面。

我想要的是当你点击“阅读更多”时，要滑下来的文章不只是出现。

提前谢谢你们。

HTML

<p>The text that is shown by default.<a href="#" id="example-show" class="showLink" onclick="showHide('example');return false;">Read more</a></p>
      <div id="example" class="more">
         <p>The rest of the article</p>
         <p><a href="#" id="example-hide" class="hideLink" onclick="showHide('example');return false;">Hide this content.</a></p>

CSS

.more {
      display: none;
      border-top: 1px solid #666;
      border-bottom: 1px solid #666; }
   a.showLink, a.hideLink {
      text-decoration: none;
      color: #336699;
      padding-left:20px;
      background: transparent url(down.gif) no-repeat left; }
   a.hideLink {
      background: transparent url(up.gif) no-repeat left; }
   a.showLink:hover, a.hideLink:hover {
      border-bottom: 1px dotted #36f; }

JavaScript

  <script language="javascript" type="text/javascript">
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';
      }
   }
}
</script>

Answer 1

使用 jQuery，您可以:

$(function () {
    $('.showLink').click(function (e) {
        e.preventDefault();
        $('#example').slideToggle();
    });

    $('.hideLink').click(function (e) {
        e.preventDefault();
        $('#example').slideUp();
    });
});

Fiddle Demo