Jquery 切换添加或删除类

嗨，我在学习Jquery

当我点击链接时，我想在父div中添加和删除“card open”类。在第一次单击时，将添加该类。但当我再次单击时，该类不会被删除。我做错了什么

$(document).ready(function () {
$('.toggle-box').hide();

$('a.togglelink').on('click', function (e) {
    e.preventDefault();
    var elem = $(this).next('.toggle-box')
    $('.toggle-box').not(elem).hide();
    elem.toggle('slow');

    var parent_div = $(this).parent().addClass('card-open');
    $('.card').find('div').not(parent_div).removeClass('card-open');
});
});

HTML:

日期
描述

员工人数：5

以下是基于修复的有用反馈：

$(document).ready(function () {
$('.toggle-box').hide();

$('a.togglelink').on('click', function (e) {
    e.preventDefault();
    var elem = $(this).next('.toggle-box')
    $('.toggle-box').not(elem).hide();
    elem.toggle('slow');

    var parent_div = $(this).parent().toggleClass('card-open');

});
});

---

根据你的信息。只需使用toggleClass并以.parent（）div为目标

这是一把小提琴：

HTML:

<div class="card">
    <h3><a href="">Title</a></h3>
    <h4>date</h4>
    <a href="#" class="togglelink">Link</a> <!-- Your link was empty -->
    <div class="toggle-box">
        <p>Description</p>
        <p><strong>Employee Count:</strong> 5</p>
    </div>
    <img src="assets/img/open-arrow.svg" alt="Open Event">
</div>

---

注意：如果在页面底部加载jQuery和脚本，则不需要document.ready，因为DOM已经加载

您可以提供HTML标记吗？您可以看到一个用HTML标记更新的

.toggleClass（）

的好例子

<div class="card">
    <h3><a href="">Title</a></h3>
    <h4>date</h4>
    <a href="#" class="togglelink">Link</a> <!-- Your link was empty -->
    <div class="toggle-box">
        <p>Description</p>
        <p><strong>Employee Count:</strong> 5</p>
    </div>
    <img src="assets/img/open-arrow.svg" alt="Open Event">
</div>

$(document).ready(function () {
    $('.toggle-box').hide(); // This should really just be done with CSS instead. 

    $('a.togglelink').on('click', function (e) {
        e.preventDefault();
        $(this).parent('div').toggleClass('card-open');
    });
});