Javascript 为多个单击事件创建一个元素

我想用一个类（只有一个）创建一个div。它必须在每次展开详细信息时打开，但每次单击时都会创建div

这是HTML

<main>
    <section>
        <h3>title</h3>

        <div>
            <details>
                <summary>sum1</summary>
                content1
            </details>

            <details>
                <summary>sum2</summary>
                content2
            </details>
        </div>

    </section>
</main>

使用

remove（）

而不是

hide（）

，因为每次单击基本上都会添加一个新的

firstContent

div，而不会删除上一个。你只是把它藏起来了

$（'.firstContent'）.hide（）；
$（“详细信息”）。单击（函数（）{
$（'.firstContent'）.remove（）；
$（this.toggleClass（“openedDetails”）；
$（'details'）.not（this）.removeAttr（“open”）；
$（'details'）.not（this）.removeClass（“openedDetails”）；
if（$（'details'）.hasClass（'openedDetails'））{
$（'section h3'）。在（'content3'）之后；
$（'.firstContent'）.show（）；
}否则{
$（'.firstContent'）.remove（）；
}
});

标题
sum1
内容1
sum2
内容2
code创建一个glitch@Jos你说的“小故障”是什么意思？如果你运行代码段内容3和内容1，转到div的外部并duplicate@Jos谢谢你，我的朋友。修正了。我不知道如何使用.remove（）方法，现在我知道了，谢谢你的帮助；）为什么要创建元素而不是切换其显示？创建、销毁、创建、销毁等都是DOM上的额外工作，似乎不需要立即完成。我知道如何使用toggleClass完成这项工作，但想尝试创建元素，只是为了提高我在jquery中的技能（我想这是一种经验，谢谢你的帮助；））给你的道具，用来提高你的技能；但是你所采取的方法并不适合你所从事的项目。就我的两分钱，我知道了，谢谢你的建议，我编辑了我的帖子，也许更好，也许没有，但我正在努力；）
$('.firstContent').hide();

$('details').click(function () {
    $(this).toggleClass("openedDetails");
    $('details').not(this).removeAttr("open");
    $('details').not(this).removeClass("openedDetails");

    if ($('details').hasClass('openedDetails')) {
        $('section h3').after('<div class="firstContent">content3</div>');
        $('.firstContent').show();
    } else {
        $('.firstContent').hide();
    }

});

$('.firstContent').hide();
$('main details').click(function(){
    var mainSelf = $(this);
    $(mainSelf).toggleClass('openedDetails');
    $('details').not(mainSelf).removeAttr('open');
    $('details').not(mainSelf).removeClass('openedDetails');

    var mainParent = $(mainSelf).parents('main');
    mainParent.addClass('mainParent');
    $('main').not(mainParent).removeClass('mainParent');

    var openedFirst = $('.firstContent', mainParent);
    openedFirst.addClass('openedFirst');
    $('.firstContent').not(openedFirst).removeClass('openedFirst');
    openedFirst.show();
    $('.firstContent').not(openedFirst).hide();

});