ينهار Bootstrap 3 لتغيير الحالة النشطة

Question

لدي لوحة طي في Bootstrap v3 وأرغب في تغيير لون خلفية اللوحة النشطة من خلال تطبيق فئة جديدة عليها باستخدام Javascript أو jQuery.

هنا لوحتي

<div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                    Panel Title Name
                </a>
            </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in">
            <div class="panel-body">
                <a href="#" class="list-group-item"></i>Link</a>
                <a href="#" class="list-group-item"></i>Link</a>
                <a href="#" class="list-group-item"></i>Link</a>
            </div>
        </div>
    </div>
</div>

أرغب في تطبيق الحالة النشطة على .panel-heading عندما يكون مفتوحًا، لقد جربت الكثير من الأشياء، ولكن لم ينجح أي منها، وأنا أقدر مساعدتكم وشكرًا مقدمًا.

================ تحديث ===================== ====================================================================

تمكنت من تطبيق فصل دراسي مع هذا:

$('#accordion > .panel').on('show.bs.collapse', function (e) {
$('#accordion').find('.panel-heading').addClass("active-panel");
});

ولكنه يطبق الفصل على جميع اللوحات الموجودة في صفحتي، كيف يمكنني إصلاح Java Selector؟

Answer 1

جرب استخدام $(this) :كمان تجريبي

$('#accordion > .panel').on('show.bs.collapse', function (e) {
    $(this).find('.panel-heading').addClass("active-panel");
});