jQuery：如果类存在，请将其删除，然后将其添加到新元素

Question

我正在制作手风琴风格的视频部分。我目前正在尝试检查点击中是否存在类。我希望它一次只打开1个部分，所以我需要

1. 点击
检查课程是否存在
2. 如果是，请删除课程
3. 将类添加到单击的元素

我尝试仅使用addClass();和toggleClass();执行此操作，但我不能100％确定我缺少的内容。

添加课程

$(".contents-row").click(function(){
    $(this).toggleClass("content-open");
}); 

切换课程

$('.contents-row').click(function(){
    $(this).toggleClass('content-open');
});

这是基本的HTML设置

<div class="contents-row">
    <div class="content-option press">
        <div class="class-section-title">test1</div>
    </div>
    <div class="drop">
        test 1
    </div>
</div>

JSFiddle 的完整版下拉列表。

感谢您的帮助！

Answer 1

首先从具有content-open类的所有元素中删除content-open类。然后将类添加到单击的元素，如下所示。

$('.contents-row').click(function(){
    $('.content-open').removeClass('content-open');
    $(this).addClass('content-open');
});

Answer 2

您需要先使用类content-open从所有div中删除课程contents-row，然后添加到当前点击的div。

$('.contents-row').click(function(){
    $('.contents-row').removeClass('content-open');
    $(this).toggleClass('content-open');
});