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

每次打开文章时都设置一个标记，当您展开另一篇文章时，请检查标记（打开）文章并关闭它们。

第一部分我直接从网站上取下并更改了它。切换后设置标志。

var isOpen = true;

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

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

接下来，您只需使用beforeToggle检查是否已激活某个标志，如果是，请关闭该文章。

老实说，特别是因为你没有超级经验，你应该学会如何做这个插件自己做的事情。这将帮助您更快地学习。

所有这一切都是将div块样式设置为display：none;从字面上看，这只会使它消失，同时仍然存在。你可以用这种方式达到同样的效果：

 document.getElementById('article1').style.display = "none";

当你想要重新出现带有id article1的div块时，可能是onClick然后只是让它出现：

 document.getElementById('article1').style.display = "block";

使用CSS进行平滑过渡甚至可能更好。然后使用JavaScript来改变CSS中的样式或伪类（如：hover）

https://github.com/jedfoster/Readmore.js

1 个答案: