Question

我正在使用Readmore.js插件。我为以下问题查找了各种解决方案，但它们似乎都不完美。

我想添加一个折叠以前展开的文章的函数 - 如果有的话，当按下readmore时。

感谢Josh，当文章展开/折叠时，我设法将变量isOpen标记为true或false。现在，我试图弄清楚如何在展开新文章时折叠文章。

<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});


var isOpen = true;
$('article').readmore({
afterToggle: function(trigger, element, expanded) {

if (expanded) {
  isOpen = true;
}
if(! expanded) { 
  isOpen = false;    }
  }
});

$('article').readmore({
beforeToggle: function(trigger, element, expanded) {

if (isOpen) {

}
  }
}); 
    </script>

谢谢......

Answer 1

作为Readmore.js adds a class to expanded blocks，您可以通过以下方式识别和关闭它们：

$('article').readmore({
    beforeToggle: function(trigger, element, expanded) {
        $( '.readmore-js-expanded' ).readmore( 'close' );
    }
} );

编辑：看到Readmore.js似乎没有提供＆＃39;关闭＆＃39;您可能需要通过在锚点上触发close事件来伪造它：

$('article').readmore({
    lessLink:     '<a class="readmore-lesslink">Show less</a>',
    beforeToggle: function(trigger, element, expanded) {
        $( '.readmore-js-expanded' )
            .find( 'a.readmore-lesslink' )
                .trigger( 'click' );
    }
} );

我根本没有对此进行测试，但我认为它应该让你开始。

Answer 2

试试这个。它对我有用：

$('article').readmore({
        collapsedHeight: 80px;
        lessLink: '<a class="readmore-lesslink">Show less</a>',
            beforeToggle: function(trigger,element,more) {
            $(element).siblings("a.readmore-lesslink").not($(element).next()).trigger( "click" );
          }
    });

展开下一篇文章时折叠文章（Readmore.js - Extension）

2 个答案: