Javascript 下拉列表如何交替打开？

我制作了一个有子菜单的下拉菜单。我面临一个问题。我想要的是，当我打开“投资者关系”菜单时，另一个下拉菜单关闭。当我打开“Tata Kelola”菜单时，我先前打开的投资者菜单会自动关闭。所以我只想打开一个下拉菜单

然而，我仍然有一个问题，如下图所示。菜单仍然全部打开，而不是交替打开。

我的HTML代码

    <div id="slide-menu">
        <ul class="main">
            <li>
                <a href="<?= base_url() . '/bisnis-hotel' ?>">Bisnis</a>
            </li>
            <li class="has-child">
                <a href="javascript:void(0)">Investor Relations</a>
                <ul class="submenu">
                    <li>
                        <a href="<?= base_url(); ?>investor-relations/laporan-keuangan">Laporan Keuangan</a>
                    </li>
                    <li>
                        <a href="<?= base_url(); ?>investor-relations/annual-report">Annual Report</a>
                    </li>
                    <li>
                        <a href="<?= base_url(); ?>investor-relations/rups">RUPS</a>
                    </li>
                    <li>
                        <a href="<?= base_url(); ?>investor-relations/surat-kuasa">Surat Kuasa</a>
                    </li>
                </ul>
            </li>
            <li class="has-child">
                <a href="javascript:void(0)">Tata Kelola</a>
                <ul class="submenu">
                    <li>
                        <a href="<?= base_url(); ?>tata-kelola/organisasi">Tata Kelola Perusahaan</a>
                    </li>
                    <li>
                        <a href="<?= base_url(); ?>komite">Komite</a>
                    </li>
                    <li>
                        <a href="<?= base_url(); ?>tanggung-jawab-perusahaan">Tanggung Jawab Perusahaan</a>
                    </li>
                </ul>
            </li>
            <li class="has-child">
                <a href="javascript:void(0)">Perusahaan</a>
                <ul class="submenu">
                    <li>
                        <a href="<?= base_url(); ?>milestone">Milestone</a>
                    </li>
                    <li>
                        <a href="<?= base_url(); ?>vision-mision">Vision & Mision</a>
                    </li>
                    <li>
                        <a href="<?= base_url(); ?>dewan-komisaris">Dewan Komisaris</a>
                    </li>
                    <li>
                        <a href="<?= base_url(); ?>dewan-direksi">Dewan Direksi</a>
                    </li>
                    <li>
                        <a href="<?= base_url(); ?>karir">Karir</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="<?= base_url(); ?>press-release">Berita</a>
            </li>
            <li>
                <a href="<?= base_url(); ?>karir">Karir</a>
            </li>
        </ul>
        <div id="slide-footer-wrapper">
            <div class="footer-menu-wrapper">
                <ul id="footer-menu">
                    <li><a href="<?= base_url(); ?>contactus">Hubungi Kami | </a></li>
                    <li><a href="<?= base_url(); ?>tnc">Term & Conditions | </a></li>
                    <li><a href="<?= base_url(); ?>privacy-policy">Privacy Policy</a></li>
                </ul>
            </div>
            <div class="social-menu-wrapper">
                <ul id="slide-menu-social">
                    <li class="label">
                        Follow us:
                    </li>
                    <li>
                        <a href="">
                            <img src="<?php echo base_url('assets/images/main/instagram-logo.svg') ?>" alt="" class="img-fluid">
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <img src="<?php echo base_url('assets/images/main/facebook-logo.svg') ?>" alt="" class="img-fluid">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="<?php echo base_url('assets/images/main/twitter-logo.svg') ?>" alt="" class="img-fluid">
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

       $("#slide-menu li.has-child").on('click', function() {
            toggleSubMenu(this);
        });

        function toggleSubMenu(parent_menu) {
            // submenu height
            let submenu = $(parent_menu).find(".submenu").height();

            // normal parent menu height
            let height = $(parent_menu).height();

            // init variabel new_height
            let new_height = 0;

            if ($(parent_menu).hasClass("active")) {
                $(parent_menu).removeClass("active");

                // ketika ditutup kurangi tinggi parent dengan tinggi sumbenu
                new_height = height - submenu;
            } else {
                $(parent_menu).addClass("active");

                // ketika dibuka tambahkan tinggi parent dengan tinggi sumbenu
                new_height = height + submenu;
            }

            // Set tinggi parent menu
            $(parent_menu).css("height", new_height);
        }

我的CSS

    div#slide-menu {
        position: fixed;
        right: 0px;
        padding-right: 25px;
        height: 100vh;
        background: rgb(38, 69, 53);
        width: 95%;
        text-align: right;
        padding-top: 78px;
        z-index: 100;
        transform: translateX(100%);
        transition: ease transform 0.3s;
    }

    #slide-menu .main {
        overflow-y: scroll;
        height: 70%;
    }

    div#slide-menu a {
        color: white;
        font-size: 25px;
        font-family: 'Brandon Grotesque';
        line-height: normal;
        text-decoration: none;
    }

    div#slide-menu ul {
        list-style: none;
    }

    div#slide-menu li.has-child::after {
        content: '';
        border-top: 3px solid white;
        border-right: 3px solid white;
        width: 15px;
        height: 15px;
        position: absolute;
        top: 22px;
        right: 5px;
        transform: rotate(45deg);
        transition: ease transform 0.2s;
    }

    div#slide-menu li.has-child {
        position: relative;
        overflow: hidden;
        height: 45px;
        transition: ease all 0.2s;
    }

    div#slide-menu ul.main .submenu a {
        font-size: 20px;
        line-height: 35px;
        font-family: 'Brandon Grotesque Light';
    }

    z div#slide-menu ul.submenu {
        height: 0px;
        display: block;
        z-index: 0;
    }

    div#slide-menu>ul>li {
        padding-right: 50px;
        margin: 30px 0px;
        position: relative;
    }

    div#slide-menu li.has-child.active>a {
        color: #c9a87e;
        font-family: 'Brandon Grotesque';
        font-weight: 700;
        /* font-family: 'Brandon Grotesque Bold'; */
    }

    div#slide-menu li.has-child.active::after {
        content: '';
        border-top-color: #c9a87e;
        border-right-color: #c9a87e;
        transform: rotate(135deg);
    }

    div#slide-menu.show {
        transform: translateX(0%);
    }

    header #slide-menu-layer {
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0px;
        left: 0px;
        background: transparent;
    }

---

您需要检查之前的菜单，并确保它当前处于关闭状态。如果打开了，强制他们关闭菜单。这是工作小提琴：

//捕获父菜单的初始高度
const menuHasChild=$（“#slide menu.has child”）；
常量menuAnchor=$（“.has child>a”）；
const menuHeight=menuHasChild.height（）；
//因为你可能会改变高度
//在css上，将初始高度应用于dom
css（“高度”，menuHasChild.css）；
/**
*打开当前菜单并检查是否更早
*菜单处于活动状态，如果是，请关闭它们。
*@param{Event.currentTarget}target
*/
功能打开子菜单（目标）{
$（目标）.addClass（“活动”）；
$（target.css（“高度”，target.scrollHeight）；
重置活动（目标）；
};
/**
*关闭当前活动菜单。
*@param{Event.currentTarget}target
*/
功能关闭子菜单（目标）{
$（目标）.removeClass（“活动”）；
$（目标）.css（“高度”，menuHeight）；
};
/**
*检查并重置早期活动菜单
*@param{Event.currentTarget}target
*/
功能resetEarlierActive（目标）{
$（menuHasChild）.每个（函数（索引，子函数）{
if（child！==$（target.get（0））{
返回关闭子菜单（子菜单）；
}
});
}
/**
*切换当前目标子菜单。
*@param{Event}事件菜单单击处理程序
*/
功能切换子菜单（事件）{
event.preventDefault（）；//防止锚定
const currentTarget=$（event.target）.parent（）[0]；
const currentlyOff=！$（currentTarget）.hasClass（“活动”）；
const currentlyOn=$（currentTarget）.hasClass（“活动”）；
如果（currentlyOff）打开子菜单（currentTarget）；
如果（当前里昂）关闭子菜单（当前目标）；
}
//放开它
菜单anchor.on（'单击'，切换子菜单）
*{
保证金：0；
填充：0；
}
身体{
字体系列：“Segoe UI”，无衬线；
}
ul，ol{列表样式：无；}
李梅因先生{
显示：块；
填充：0 25px；
线高：50px；
高度：50px；
溢出：隐藏；
}
李安少校{
文字装饰：无；
}












































您需要检查前面的菜单，确保它当前处于关闭状态。如果打开了，强制他们关闭菜单。这是工作小提琴：


//捕获父菜单的初始高度
const menuHasChild=$（“#slide menu.has child”）；
常量menuAnchor=$（“.has child>a”）；
const menuHeight=menuHasChild.height（）；
//因为你可能会改变高度
//在css上，将初始高度应用于dom
css（“高度”，menuHasChild.css）；
/**
*打开当前菜单并检查是否更早
*菜单处于活动状态，如果是，请关闭它们。
*@param{Event.currentTarget}target
*/
功能打开子菜单（目标）{
$（目标）.addClass（“活动”）；
$（target.css（“高度”，target.scrollHeight）；
重置活动（目标）；
};
/**
*关闭当前活动菜单。
*@param{Event.currentTarget}target
*/
功能关闭子菜单（目标）{
$（目标）.removeClass（“活动”）；
$（目标）.css（“高度”，menuHeight）；
};
/**
*检查并重置早期活动菜单
*@param{Event.currentTarget}target
*/
功能resetEarlierActive（目标）{
$（menuHasChild）.每个（函数（索引，子函数）{
if（child！==$（target.get（0））{
返回关闭子菜单（子菜单）；
}
});
}
/**
*切换当前目标子菜单。
*@param{Event}事件菜单单击处理程序
*/
功能切换子菜单（事件）{
event.preventDefault（）；//防止锚定
const currentTarget=$（event.target）.parent（）[0]；
const currentlyOff=！$（currentTarget）.hasClass（“活动”）；
const currentlyOn=$（currentTarget）.hasClass（“活动”）；
如果（currentlyOff）打开子菜单（currentTarget）；
如果（当前里昂）关闭子菜单（当前目标）；
}
//放开它
菜单anchor.on（'单击'，切换子菜单）
*{
保证金：0；
填充：0；
}
身体{
字体系列：“Segoe UI”，无衬线；
}
ul，ol{列表样式：无；}
李梅因先生{
显示：块；
填充：0 25px；
线高：50px；
高度：50px；
溢出：隐藏；
}
李安少校{
文字装饰：无；
}