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

Question

我有一个页面，其中有几篇短文和一个侧导航，可以根据其 ID 向下滚动到一篇文章。这些文章已使用 readmore.js chop ，因此它们都有一个“阅读更多”按钮。

侧导航链接向下滚动到 chop 的版本。我希望直接阅读文章的全文，但由于它们都在同一页上，所以我不知道如何继续。

我的代码如下所示:

<!--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的 header ，取.next()元素应该是 <article> ，并用 .readmore('toggle') 展开它单击导航后。

但是，有 currently a bug在 readmore.js 中防止这种情况发生。

如果您习惯自己编辑 readmore.js，那么您可以更改这些部分并替换 _this与 this使其发挥作用。这是行227和231在 readmore.js 的非最小化版本中。

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

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