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

我有一个页面，其中包含几篇简短的文章和一个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>

任何建议将不胜感激！

最佳答案

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

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

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

但是，readmore.js中有currently a bug可以防止这种情况。

如果您自己可以自己编辑readmore.js，则可以更改这些部分，并用_this替换this以使其起作用。在最小化版本的readmore.js中，它是227和231行。

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

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