Question

我有一个页面，里面有几篇简短的文章和一个sidenav，根据它的id向下滚动到一篇文章。这些文章已经使用readmore.js进行了截断，因此他们都有一个＆＃39; Read More＆＃39;按钮。

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的标头，取.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;
}

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

1 个答案: