使用jQuery向元素添加类

Question

我的网站上有一个区域，其中解释了使用的条款。

我已经设置好它，以便任何人都可以单击标题，然后打开说明。

我想添加一个“ :: after”区域，该区域在关闭时带有向下箭头，而在打开时变为向上箭头。

我发现我正在使用的代码在JSFiddle上可以正常工作，但是我的wordpress网站上存在问题。

显示说明，并且在这种情况下可以正常工作。但是单击h2时，不会添加.active类

代码：

function toggleAnswer() {
  jQuery(this).next('.jargon-desc').slideToggle();
}

jQuery('.jargon-desc').hide();

jQuery('.jargon-header').click(toggleAnswer);

jQuery(document).ready(function () {
  jQuery("h2").on('click', function () {
      jQuery(this).toggleClass('active');
  });
});

@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css);
.jarg-container {
    background: #018fcf;
    box-shadow: 4px 5px 14px 1px black;
    margin: 0 2.5% 2em;
    transition: all .75s ease;
    border-radius:15px;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.jarg-container h2 {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color:cornsilk;
}
.jarg-container h2::after {
    font-size: 0.5em !important;
    right: 10%;
    position: absolute;
}
.jargon-desc {
    color: black;
    padding: 0 0 1em 0;
    background:white;
    padding:1em;
    border-radius: 0 0 15px 15px;
    border-top: 2px ridge gainsboro;
}
.jargon-instruction p {
    color: black;
    font-size: 1.5em;
    padding-left: 1.5em;
    position: relative;
    bottom: 1em;
    text-decoration: underline;
}
.jargon-header::after {
    content: "\f0dd";
    font-family: FontAwesome;
}
.jargon-header.active::after {
    content: "\f0de";
    font-family: FontAwesome;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main id="content">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div id="primary" class="content-area">
                    <main id="main" class="site-main" role="main">
                        <div class="col-md-12">
                            <div class="col-md-5 jarg-container">
                                <h2 class="jargon-header">Header</h2>
                                <div class="jargon-desc">
                                    <p>Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description .</p>
                                </div>
                            </div> 
                        </div>
                    </main>
                    <!-- #main --> 
                </div>
                <!-- #primary --> 
            </div>
        </div>
    </div>
</main>

任何帮助弄清楚为什么会很棒