在展开下一篇文章时折叠文章(Readmore.js - Extension)

collapse article when next article is expanded (Readmore.js - Extension)

本文关键字：文章 Readmore 折叠 js Extension 一篇      更新时间：2023-09-26

我使用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>

谢谢了…

当Readmore.js为扩展块添加一个类时，您可以像这样识别和关闭它们:

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

编辑:看到Readmore.js似乎没有提供一个'关闭'的方法，你可能需要通过触发关闭事件的锚:

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

我没有测试这个，但我想它应该让你开始。

试试这个。它正在为我工作:

$('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" );
          }
    });
相关文章：