Question

我对readmore.js脚本有一个简单的问题。

这是代码：

$('article').readmore({maxHeight: 240});

使用html文章标记定位所有内容，但如何更改为仅定位一篇文章？

谢谢！

修改

这是在html的末尾

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/readmore.js"></script>

  <script>
  $('#info').readmore({
    moreLink: '<a href="#">More examples and options</a>',
    maxHeight: 390,
    afterToggle: function(trigger, element, expanded) {
      if(! expanded) { // The "Close" link was clicked
        $('html, body').animate( { scrollTop: element.offset().top }, {duration: 100 } );
      }
    }
  });

    $('article').readmore({maxHeight: 240});
</script>

然后我的文章就像这样

<article>
<p>loads of text</p>
</article> <!--this article is ok-->

<article>
<p>lots of text</p> <!--this article needs a readmore link -->

如果我将文章标记更改为：

<article id="text-one">
<p>loads of text</p>
</article> <!--this article is ok-->

<article id="text-two">
<p>lots of text</p> <!--this article needs a readmore link -->

并更改

$（'article'）。readmore（{maxHeight：240}）;

到

$（'＃text-two'）。readmore（{maxHeight：240}）;

这是对的吗？

Answer 1

看起来readmore使用像CSS选择器这样的jQuery框架。

要定位特定文章，只需优化选择器即可。例如，如果您的HTML中有：

<article id="my-id">...</article>

然后你用：

来定位它

$('#my-id').readmore(...);

因为那是CSS选择器，它以页面上具有特定ID的元素为目标。

Answer 2

您可以使用以下功能

JS CODE

        //read more or less
        function showMoreOrLess(thisObj,bonusContent){
        var caption = thisObj.innerHTML;
        //alert(caption);
        if ( caption == "Read more" ) {
            document.getElementById(bonusContent).style.display = "inline";
            thisObj.innerHTML = "Read less";
        } else {
            document.getElementById(bonusContent).style.display = "none";
            thisObj.innerHTML = "Read more";
        }
    }

HTML CODE

  main text here...
  <a class="read" onclick="showMoreOrLess(this,'moreS1');">Read more</a>

  <span id="moreS1" style="display:none">
    whatever text you need to put here...
  </span>

Readmore.js脚本

2 个答案: