toggleClass 但只点击了一个 div

Question

我正在从正在为我的站点生成代码的外包中提取动态数据，因此我正在尝试在被提取的内容之上添加功能。我有一个 jquery toggleClass 设置，我在其中单击一个 div 并切换类“活动”以显示工作描述，然后在第二次单击时隐藏内容。 问题是当我单击一个它们都打开时，因为它们具有相同的类名。 我怎样才能只针对我点击的那个而让其他人关闭？

隐藏孩子点击但不喜欢它的美学

   $('.resumator-job').click(function() {
    $('.resumator-job-description').toggleClass('active');
});

只有 div 点击打开，其他人保持关闭，直到他们被单独点击

Answer 1

您可以使用this来定位 jQuery 中的特定元素。 this指的是手头的元素。

你可以玩这个！ 尝试添加console.log($(this)); 到您的函数并查看它列出了哪个元素。

W3Schools 有一个使用this 的演示。

$('.resumator-job').click(function() {
    $('.resumator-job-description', this).toggleClass('active');
});

$(this) - 选择当前的 HTML 元素 - W3Schools

Answer 2

你也可以在这里使用.find()来获得你想要的东西。

$('.resumator-job').click(function() {
    $(this).find('.resumator-job-description').toggleClass('active');
});

演示：

 $('.resumator-job').click(function() { $(this).find('.resumator-job-description').toggleClass('active'); });

 .resumator-job { display: inline-block; position: relative; width: 100px; height: 100px; border: 1px solid #ccc; overflow: hidden; } .resumator-job-description { position: absolute; top: 100%; left: 0; } .active { top: 50%; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class='resumator-job'> <div class='resumator-job-description'>more stuff</div> </div> <div class='resumator-job'> <div class='resumator-job-description'>more stuff</div> </div> <div class='resumator-job'> <div class='resumator-job-description'>more stuff</div> </div> <div class='resumator-job'> <div class='resumator-job-description'>more stuff</div> </div>