Bootstrap折叠菜单点击子项时保持展开状态的实现问询

我现在遇到了Bootstrap折叠菜单的一个问题，先给大家展示我的相关代码：

HTML 代码 #

<div style="padding-right: 12px;">
    <ul class="menu-items">
        <li class="menu-item active" onclick="onMenuClick(this)">
            <i class="fa-duotone fa-house-chimney"></i>
            پیشخوان
        </li>
        <li accessibility="edit_or_add_product" class="menu-item">
            <i onclick="onMenuClick(this)" class="fa-duotone fa-compass"></i>
            موقعیت
        </li>
        <li class="menu-item" data-bs-toggle="collapse" data-bs-target="#cRequestMenu"
            aria-expanded="false"
            aria-controls="cRequestMenu">
            <i class="fa-duotone fa-code-pull-request-draft"></i>
            مدیریت درخواست ها
            <ul class="menu-items collapse" id="cRequestMenu">
                <li class="menu-item" onclick="onMenuClick(this)">
                    <i class="fa-duotone fa-arrow-progress"></i>
                    پیگیری درخواست
                </li>
            </ul>
        </li>
        <li class="menu-item" onclick="onMenuClick(this)"><i class="fa-duotone fa-people-pants"></i>جمعیت</li>

        <li class="menu-item" data-bs-toggle="collapse" data-bs-target="#cMenuSystem" aria-expanded="false"
            aria-controls="cMenuSystem">
            <i class="fa-duotone fa-server"></i>
            سیستم
            <ul class="menu-items collapse" id="cMenuSystem">
                <li class="menu-item" onclick="openLink('Application/Log/log4j2' , this)">
                    <i class="fa-duotone fa-bug"></i>
                    لاگ / دیباگ
                </li>
            </ul>
        </li>
        <li class="menu-item" onclick="onMenuClick(this)">
            <i class="fa-solid fa-arrow-right-from-bracket"></i>
            خروج از سیستم
        </li>

    </ul>
</div>

JavaScript 代码 #

function openLink(href, elm) {
    window.open(href, '_blank').focus();
    onMenuClick(elm);
}

function onMenuClick(elm) {
    let menu_items = document.getElementsByClassName('menu-item');
    for (let i = 0; i < menu_items.length; ++i) {
        menu_items[i].classList.remove('active');
    }
    elm.classList.add("active");
}

目前的问题是：当点击展开后的子菜单项时，父菜单会自动折叠回去。我想要实现的效果是——用户展开父菜单后，点击子菜单项，子项能正常被标记为active状态，同时父菜单保持展开状态，不会自动折叠。请问该怎么修改代码来达成这个需求？

备注：内容来源于stack exchange，提问作者S.kh