readmore javascript插件第一项打开

时间:2014-07-08 11:26:49

标签: javascript

我使用这个精彩的插件,想知道如何设置第一个项目是开放的,其余的是关闭的。

有什么想法吗?

的Javascript

var options = {
            moreLink: '<a class="read_more_link" href="#">more...</a>',
            lessLink: '<a class="read_less_link" href="#">less...</a>',
            heightMargin: 50,
            sectionCSS: 'display: inline-block; width: 100%;',
        };

    $('.content-top-wide, .content-bottom-item').each(function(){
        var el = $(this), content = el.find('div:first,span:first,p:first, article:first'), maxHeight = 0;
        if (content.length) {
            maxHeight = content.outerHeight();
            content.prevAll().each(function(){
                maxHeight += $(this).outerHeight(true);
            });
            // set maxHeight to 200px  if the element has hight greater than 200  
            options.maxHeight = Math.min(200, maxHeight);
            el.readmore(options);
        };
    });

HTML

<div class="content-bottom pull-left">
    <h2>Title</h2>
    <div class="content-bottom-item pull-left">
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, consequatur inventore iure aliquam praesentium molestiae facilis labore! Magni, dolorem, ex? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, consequatur inventore iure aliquam praesentium molestiae facilis labore! Magni, dolorem, ex?
     </div>
</div>

2 个答案:

答案 0 :(得分:0)

阅读插件的文档:https://github.com/jedfoster/Readmore.js
将“startOpen:false”添加到第一个项目的选项可以解决您的问题。

答案 1 :(得分:0)

我通过添加if语句来管理:

if ( i == 0) {
                options.startOpen = true;
            } else {
                options.startOpen = false;
            }
            el.readmore(options);

以下是有人需要的工作版本:http://jsfiddle.net/brunodd/pvZ8H/