如何使用jQuery toggleClass影响特定元素

Question

我正在做一个侧导航栏，它有多个链接容器，支持隐藏，直到上面的链接标题上发生点击事件。代码如下：

<div class="link-section">
<small class="link-section-title">Utilities</small>
<div class="link" data-type="accounts">
<span class="iconify" data-icon="material-symbols:inventory-2-outline-rounded" style="color: #ececec;" data-width="20" data-height="20"></span>
<p>Accounts</p>
</div>
<div class="links">
<p>manage</p>
<p>example</p>
<p>example</p>
<p>example</p>
<p>example</p>
</div>
</div>

当我点击元素link-section-title时，我使用jQuery来切换一个名为"open"的类，该类将最大高度设置为div.links。问题是，我有多个link-sections，每次单击一个link-section-title，它都会将open类添加到页面中的每个div.links中。

有没有办法防止这种情况，只将类添加到支持打开的容器中？谢谢

Answer 1

使用$(this)访问同一节中的元素。

$(".link-section-title").click(function() {
$(this).siblings(".links").toggleClass("open");
});