在一个页面上显示多个read more(省略号)，而不是单独显示每个部分

Question

我在搜索结果页面上有多个标签列表，每个标签仅限于显示两个标签，如果有更多，我添加了一个省略号(…)来显示隐藏的点击。它在一定程度上是有效的，但是点击其中一个会打开所有的部分，而不是特定的部分。

$('.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>

Answer 1

所以我发现我做错了什么，并从中吸取了一些重要的教训。

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

this和parent()是必需的

最后，这段代码工作了，并保持了开放特性，只保留了我想要的。

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