在悬停时显示下拉菜单并替换CSS类

Question

需要使用JS操作的两个元素：

<li class="navTab myFirstTab Popup PopupControl PopupOpen PopupContainerControl">

对于上面的元素：
我希望OnMouseHover替换类值：
使用PopupOpen弹出关闭

<div class="Menu JsOnly tabMenu myFirstTabLinks" id="XenForoUniq0" style="display: block; visibility: visible; top: 96px; left: 960.5px;">

同时，上面的元素样式属性可以从以下位置更改其值：
display：none; 显示：块;

HTML结构示例：

<ul class="publicTabs navLeft">
    <li class="navTab forums selected">
     <a href="#" class="navLink">Home</a>
     <a href="#" class="SplitCtrl" rel="Menu"></a>
    </li>                                   

    <li class="navTab myFirstTab Popup PopupControl PopupClosed     PopupContainerControl">
      <a href="#" class="navLink">On hover I should have a DropDown</a>
      <a href="#" class="SplitCtrl" rel="Menu"></a>
    </li>

     <li class="navTab mySecondTab Popup PopupControl PopupClosed PopupContainerControl uix_rightMost">
        <a href="#"  class="navLink">On hover I should have a DropDown​2</a>
        <a href="#" class="SplitCtrl"      rel="Menu"></a>
     </li>
                            <!-- members -->
                            <!-- extra tabs: end -->
                            <!-- responsive popup -->
                            <li class="navTab navigationHiddenTabs navTab--j    justIcon Popup PopupControl PopupClosed PopupContainerControl" style="display: none;">
                                <a rel="Menu" class="navLink NoPopupGadget uix_dropdownDesktopMenu"><i class="uix_icon uix_icon-navOverflow"></i><span class="uix_hide menuIcon">ham</span></a>
                            </li>

</ul>


 <!-- START DropDown-->
 <div class="Menu JsOnly tabMenu myFirstTabLinks" id="XenForoUniq0"   style="display: none; visibility: visible; top: 96px; left: 960.5px;">
     <div class="primaryContent menuHeader">
         <h3>My First drop down menu title</h3>
     </div>     

<ul class="secondaryContent blockLinksList">
       <li><a href="#">item1</a></li>
       <li><a href="#">item2</a></li>
   </ul>
</div>

<div class="Menu JsOnly tabMenu mySecondTabLinks" id="XenForoUniq1"     style="display: none; visibility: visible; top: 76px; left: 879.5px;">
     <div class="primaryContent menuHeader">
           <h3>My Second drop down menu title</h3>
     </div>

 <ul class="secondaryContent blockLinksList">
      <li><a href="#">item1</a></li>
      <li><a href="#">item2</a></li>
      <li><a href="#">item3</a></li>
 </ul>                                      
</div>

<!-- FINISH DropDown -->

Answer 1

将数据目标属性添加到tablinks div ..类似于下面

<li class="navTab myFirstTab Popup PopupControl PopupClosed  PopupContainerControl" data-target="myFirstTabLinks">
<li class="navTab mySecondTab Popup PopupControl PopupClosed  PopupContainerControl" data-target="mySecondTabLinks">

现在

$('.navTab.Popup').on('mouseenter', function() {
   $(this).removeClass('PopupClosed').addClass('PopupOpen');
   var cls = $(this).data('target'); // fetch which class to target.
   $('.Menu.' + cls).css('display','block'); // will make display block
}). on('mouseleave', function() {
   $(this).addClass('PopupClosed').removeClass('PopupOpen');
   var cls = $(this).data('target'); // fetch which class to target.
   $('.Menu.' + cls).css('display','none'); // will make display none
});