Question

我有以下javascript，允许我的网页访问者点击链接并显示文章的全部内容，例如＆＃34;阅读更多＆＃34;当您单击它时，整个文章显示在下面。

我想要的是，当您点击＆＃34;阅读更多＆＃34;时，要向下滑动的文章不仅会出现。

提前谢谢你们。

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使这些动画变得更加容易（因为有人已经完成并对细节进行了编码）。

你可以尝试：

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
    function showHide(shID) {
        if ($('#shID').length) {
            var isDown = $('#shID').data('isDown')?false:true;
            $('#shID'+(isDown?"":"-show")).slideDown('slow');
            $('#shID'+(isDown?"-show":"")).slideUp('slow');
        }
    }
</script>

Answer 2

使用jQuery，您可以：

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

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

<强> Fiddle Demo

用jquery切换幻灯片

2 个答案: