一页上的多个阅读更多（省略号）显示全部而不是单独显示每个部分答案

【问题标题】：Multiple read more (ellipses) on one page showing all and not each section individually一页上的多个阅读更多（省略号）显示全部而不是单独显示每个部分
【发布时间】：2021-12-13 16:41:24
【问题描述】：

我在搜索结果页面上有多个标签列表，每个标签只能显示两个标签，如果还有更多，我添加了一个省略号 (...) 以在点击时显示隐藏的标签。它在一定程度上起作用，但单击一个会打开所有部分，而不是特定部分。

$('.categories-list').each(function (index, value) {
    $('.seymour').click(function () {
      $('.categories-list li:hidden').show();
      if ($('.categories-list li').length === $('.categories-list li:visible').length) {
        $('.seymour').hide();
      }
    });
  });

列表在 css 中受到限制

.categories-list li:nth-child(n+3) {
  display: none;
}

这里是显示列表的html

<div class="search-teaser-issues">
    <ul class="categories-list">
       {% for category in categories_array %}
         <li class="category">{{ category }}</li>
       {% endfor %}
       <span class="category seymour"> . . . </span>
    </ul>
</div>

【问题讨论】：

我猜你需要将$('.categories-list li:hidden') 更改为相对于引发点击事件的.seymour 的选择器。但是，如果没有看到相关的 HTML，我们无法向您展示执行此操作的代码。您能否编辑问题以包含它
@RoryMcCrossan 更新了问题以包含相关的 HTML

标签： jquery show-hide

【解决方案1】：

所以我弄清楚了我做错了什么，并在此过程中学到了一些重要的教训。

假设 jquery 足够聪明可以做我想做的事情是错误的，学习如何使用

this 和 parent() 是必不可少的

最后这段代码成功了，并且把开放的特性保持在我想要的那一个。

$('.categories-list .seymour').click(function () {
  var par = $(this);
  var list = par.parent('ul');
  list.find('li:hidden').show();
});

【讨论】：