如何创建一个按钮来隐藏和显示每个帖子的更多标签？

【问题标题】：How can I create a button to hide and show more tags per post?如何创建一个按钮来隐藏和显示每个帖子的更多标签？
【发布时间】：2019-08-08 21:11:24
【问题描述】：

在我的 wordpress 网站中，我有一个包含多个帖子的页面。在这些帖子中，有一个帖子标签区域。标签的数量各不相同，我将标签的最大数量设置为 5。因为其中一些帖子有超过 5 个标签，有没有办法制作一个 JS 按钮来显示或隐藏额外的标签？例如，如果最大数量为 5，点击 SHOW 会显示超过 5 个，点击 HIDE 会将标签恢复为原来的 5。

我尝试过使用几段代码来组合一些东西，但我的专业知识相当缺乏。

该变量旨在遍历每个帖子并搜索所有标签（在本例中为“a”）以查找锚链接。

jQuery(document).ready(function( $ ){
$('.show-all').click(function() {
       $('.tags-links').each(function() {
    var tags = $(this).find('a');
        console.log(tags.length);

  });
});

});

【问题讨论】：

标签： jquery wordpress tags

【解决方案1】：

我会做的很简单。我会用 css .tag-links:nth-child(n+5) 隐藏 .tag-links，如果它有某个类，则显示 .tag-links。

JSfiddle

HTML：

<a href="#" class="show-all">show all</a>

<div class="container">
  <a href="#" class="tag-links">tag #1</a>
  <a href="#" class="tag-links">tag #2</a>
  <a href="#" class="tag-links">tag #3</a>
  <a href="#" class="tag-links">tag #4</a>
  <a href="#" class="tag-links">tag #5</a>
  <a href="#" class="tag-links">tag #6</a>
  <a href="#" class="tag-links">tag #7</a>
  <a href="#" class="tag-links">tag #8</a>
  <a href="#" class="tag-links">tag #9</a>
  <a href="#" class="tag-links">tag #10</a>
</div>

CSS：

.tag-links:nth-child(n+6){
  display: none;
}
.show-tags .tag-links{
  display: inline;
}

JQuery:

$('.show-all').on('click', function(e)
{
    $('.container').toggleClass('show-tags');

    e.preventDefault();
});

【讨论】：