文章按钮和菜单上的readmore.js

Question

我有一个页面，其中包含几篇简短的文章和一个sidenav，可根据其ID向下滚动到文章。 文章已使用readmore.js进行了截断，因此它们都有一个“阅读更多”按钮。

sidenav链接向下滚动到截断的版本。 我希望直接阅读本文的全文，但是由于它们都在同一页上，所以我不确定该如何进行下去。

我的代码如下所示：

<!--sidenav-->

<ul class="sidenav-list navtree-list" id="navtree-0">
  <li >
    <a href="#article1" class="sidenav-item">
      <h2><?php echo $page->header1() ?></h2>
    </a>
  </li>
  <li >
    <a href="#article2" class="sidenav-item">
      <h2><?php echo $page->header2() ?></h2>
    </a>
</li>

<!--articles-->
<div class="container-fluid content-desktop">

<h3 id="article1"><?php echo $page->header1() ?></h3>
  <article data-readmore>
    <?php echo $page->description1()->kirbytext()?> 
  </article>

<h3 id="article2"><?php echo $page->header2() ?></h3>
  <article data-readmore>
    <?php echo $page->description2()->kirbytext()?>
  </article>

任何建议将不胜感激！

Answer 1

现在通常可以使用.readmore('toggle')解决此问题，例如

$(document).ready(function() {
  $('.sidenav-item').click(function() {
      $($(this).attr('href')).next().readmore('toggle');
  })
});

这将找到具有匹配ID的标头，采用应为<article>的.next()元素，并在单击导航后使用.readmore('toggle')对其进行扩展。

但是 ， 目前在readmore.js中存在一个错误可以阻止这种情况。

如果您熟悉编辑readmore.js自己，那么你可以改变这些部分和替换_this与this使它工作。 在readmore.js的非最小版本中，它是第227和231行。

if (! trigger) {
  trigger = $('[aria-controls="' + _this.element.id + '"]')[0];
}

if (! element) {
  element = _this.element;
}