Jquery - Having 2 menu (hamburger), how to close a menu while the other is open?

$(document).ready(function(){
        // ANIMAÇÃO MENU MOBILE
        $(".menuIcon").click(function () {

            if($(".toggle-categoria").hasClass("showCategoria")) $(".toggle-categoria").trigger("click");

            $(".menu-mobile").toggle(500);
            $(this).toggleClass('showMenu');
        });        
        
        $(".menu-mobile li").click(function () {
            $(".menu-mobile").toggle(500);
            $(".menuIcon").removeClass('showMenu');
            console.log('entrou');
        });
        /*************************************************/
        /*************************************************/
        // ANIMAÇÃO MENU CATEGORIA
        $(".toggle-categoria").click(function () {

            if($(".menuIcon").hasClass("showMenu")) $(".menuIcon").trigger("click");

            $(".menu-categoria").toggle(500);
            $(this).toggleClass('showCategoria');
        });

        $(".menu-categoria li").click(function () {
            $(".menu-categoria").toggle(500);
            $(".toggle-categoria").removeClass('showCategoria');
            console.log('entrou');
        });
    }); 

/***** nav mobile *****/
.nav-mobile{
    display: block;
    top: 0;
    width: 100%;
    max-height: 80px;
    position: fixed;
    z-index: 99;
    background: #141314;
}  

.nav-mobile .toggle{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.nav-mobile .toggle .logo-mobile{
    width: 60px;
}

.toggle .logo-mobile a img{
    width: 100%;
}

.nav-mobile .toggle .menu-hb{
    float: right;
    width: 60px;
    height: 78px;
    background: transparent;
}
.toggle .toggle-categoria p{
    color: #fff;
    cursor: pointer;
}
.toggle .menu-hb .menuIcon{
    position: relative;
    top: 15px;
    cursor: pointer;
    text-align: center;
    height: 100%;
}

.menu-hb .menuIcon .top, .middle, .bottom{
    left: 0;
    right: 0;
    margin: 0 auto;
    height: 4px;
    width: 30px;
    position: absolute;
    border-radius: 15px;
    background: rgb(146, 123, 71);;
    transition: all 400ms ease 0;
    -moz-transition: all 400ms ease 0;
    -webkit-transition: all 400ms ease 0;
    -ms-transition: all 400ms ease 0;
    -o-transition: all 400ms ease 0;
}

.menu-hb .menuIcon .top{
    top: 13px;
}
.menu-hb .menuIcon .middle{
    top: 21px;
}
.menu-hb .menuIcon .bottom{
    top: 29px;
}

.menu-hb .showMenu .top{
    background: rgb(146, 123, 71);
    top: 21px;
    transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
}

.menu-hb .showMenu .middle{
    opacity: 0;
}

.menu-hb .showMenu .bottom{
    background: rgb(146, 123, 71);
    top: 21px;
    transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
}

.nav-mobile .menu-mobile,
.nav-mobile .menu-categoria{
    display: none;
    padding: 0 0 15px;
    background: #141314;
    width: 100%;
    height: 100%;
    z-index: 99999;
    right: 0;
    top: 79px;
    position: fixed;
    overflow: auto;
}

.nav-mobile .menu-mobile .menu-dinamico-mobile,
.nav-mobile .menu-categoria .menu-categoria-mobile{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    overflow: auto;
    padding-left: 0;
}

.menu-dinamico-mobile li,
.menu-categoria-mobile li{
    padding: 20px 0;
    display: block;
    text-align: center;
    width: 100%;
}

.menu-dinamico-mobile a{
    color: rgb(146, 123, 71);
    font-size: 16px;
    line-height: 20px;
    text-transform: uppercase;
}

.menu-categoria-mobile a{
    color: #fff;
    font-size: 16px;
    line-height: 20px;
    text-transform: uppercase;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><navclass="navbar nav-mobile">
        <div class="header-container">
            <div class="toggle">
                <div class="logo-mobile">
                    
                </div>
                <div class="toggle-categoria">
                    <p>+ produtos</p>
                </div>
                <div class="menu-hb">
                    <div class="menuIcon">
                        <span class="top"></span>
                        <span class="middle"></span>
                        <span class="bottom"></span>
                    </div>
                </div>
            </div>
            <div class="menu-categoria">
                <ul class="menu-categoria-mobile" id="menu1">
                    <li><a href="">carros</a></li>
                    <li><a href="">carros</a></li>
                    <li><a href="">carros</a></li>
                    <li><a href="">carros</a></li>
                    <li><a href="">carros</a></li>
                </ul>
            </div>
            <div class="menu-mobile">
                <ul class="menu-dinamico-mobile" id="menu2">
                    <li><a href="">carros</a></li>
                    <li><a href="">carros</a></li>
                    <li><a href="">carros</a></li>
                    <li><a href="">carros</a></li>
                    <li><a href="">carros</a></li>
                </ul>
            </div>
        </div>
    </nav>

const boxes = document.querySelectorAll(".ok");
boxes.forEach(boxClick => boxClick.addEventListener("click",function(){
[...boxes].filter(box => box != this).forEach(box => box.checked = false);
}));

[type="checkbox"] {
    display: none;
}
[type="checkbox"]:checked + label {
    background-color: red;
}
.menu-categoria, .menu-mobile {
    position: absolute;
    height: 0px;
    opacity: 0;
    overflow: hidden;
    transition: all 300ms ease-in-out;
}
label {
    cursor: pointer;
    padding: 10px 14px;
    background-color: black;
    transition: background-color 250ms ease-in-out;
    color: #ffffff;
}
input[id="cate"]:checked ~ .menu-categoria {
    height: 150px;
    opacity: 1;

}
input[id="car"]:checked ~ .menu-mobile {
    height: 150px;
    opacity: 1;
}

<nav>
    <input type="checkbox" name="menu" id="cate" class="ok">
    <label for="cate">Categorias</label>
    <input type="checkbox" name="menu" id="car" class="ok">
    <label for="car">Carros</label>
   
    <div class="menu-categoria">
        <ul class="menu-categoria-mobile" id="menu1">
            <li><a href="">categorias</a></li>
            <li><a href="">categorias</a></li>
            <li><a href="">categorias</a></li>
            <li><a href="">categorias</a></li>
            <li><a href="">categorias</a></li>
        </ul>
    </div>
    <div class="menu-mobile">
        <ul class="menu-dinamico-mobile" id="menu2">
            <li><a href="">carros</a></li>
            <li><a href="">carros</a></li>
            <li><a href="">carros</a></li>
            <li><a href="">carros</a></li>
            <li><a href="">carros</a></li>
        </ul>
    </div>

</nav>