Jquery - 如果悬停在父级和子级上，不要隐藏 DIV。否则隐藏 DIV

Question

使用下面的代码显示基于链接鼠标悬停或点击的子导航内容。它工作正常。

但是，

1. 将鼠标悬停在“product-menu--items”DIV 区域时，“product-listing--index”标签类“active”正在移除。如果“product-menu--items”仍然打开，则不应删除。
2. 一旦鼠标移出“product-listing--index”，“product-menu--items”DIV 就会隐藏。如果用户在“product-listing--index”或“product-menu--items”DIV中，不应隐藏“product-menu--items”。

不知道如何解决这个问题。希望得到指导解决。

if($(window).width() > 767){
    $('.product-listing--index li').hover(function () {
      let productListingID = $(this).find('a').attr('data-product');
      $(this).addClass('active').siblings().removeClass('active');
      $('#' + productListingID).addClass('active').siblings().removeClass('active');
    })
} else{
    $('.product-listing--index li').click(function () {
      var productListingID = $(this).find('a').attr('data-product');
      $(this).addClass('active').siblings().removeClass('active');
      $('#' + productListingID).addClass('active').siblings().removeClass('active');
    })
}

$('.product-listing--index li').each(function(){
    $(this).mouseout(function(){
        $('#product-menu--items').removeClass('active');
        $('.product-listing--index li').removeClass('active');
    });
    $(this).mouseover(function(){
        $('#product-menu--items').addClass('active');
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="product-listing--index">
    <li>
        <a href="javascript:void(0);" data-product="handset">
            <span>Handset</span>
        </a>
    </li>
    <li>
        <a href="javascript:void(0);" data-product="tablet">
            <span>Tablet</span>
        </a>
    </li>
</ul>

<div id="product-menu--items">
    <div class="product-item" id="handset">
        <div class="row">
            <div class="col-lg-6 col-sm-6">
                <ul>
                    <li><a href="#">Handset mainpage</a></li>
                    <li><a href="#">Huawei</a></li>
                </ul>
            </div>
            <div class="col-lg-6 col-sm-6">
                <ul>
                    <li><a href="#">Xiaomi</a></li>
                    <li><a href="#">AIS 5G</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="product-item" id="tablet">
        <div class="row">
            <div class="col-lg-6 col-sm-6">
                <ul>
                    <li><a href="#">Samsung Galaxy S20 FE</a></li>
                    <li><a href="#">Apple</a></li>
                </ul>
            </div>
            <div class="col-lg-6 col-sm-6">
                <ul>
                    <li><a href="#">Xiaomi</a></li>
                    <li><a href="#">AIS 5G</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>