如何从多个选择器中显示此.next（）元素

Question

下面的代码将使用mousenter / mouseleave隐藏和显示子菜单，具体取决于2个元素。

var count = 0;
$('.parent-menu, .sub-menu').mouseenter(function(){
    count ++;
    $('.sub-menu').show();
}).mouseleave(function(){
    count--;
    if(!count) {
        $('.sub-menu').hide();
    }
});

唯一的是它显示每个父菜单上的所有子菜单。我知道$(this.next()..etc)将采用相关的子菜单（因为它与其中的所有内容相关）但是当我使用多个选择器时，我将如何定位？

HTML

      <li class="parent-menu">
        <a href="#">Sports</a>
      </li>
       <li class="sub-menu">
          <div class="container menu-background">
             <ul>
                <li class="heading"><a href="#">Running</a></li>
                 <li><a href="#">Footwear</a></li>
                 <li><a href="#">Apparel</a></li>
              </ul>
          </div>  
        </li>                        

Answer 1

你想要这个吗？：

var count = 0;
$('.parent-menu, .sub-menu').mouseenter(function(){
    count ++;
    $(this).next().show();
}).mouseleave(function(){
    count--;
    if(!count) {
        $(this).next().hide();
    }
});

$(this).next().hide();将选择.sub-menu。