ホバー上のドロップダウンメニューを表示し、交換するCSSクラス

Question

2つの要素：上記の要素について

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

：
PopupCloseと：
私はOnMouseHoverは、クラス値を置き換えたいですPopupOpen同時に

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

からその値を変更するには、上記の要素のスタイル属性：
表示：なし;表示する：ブロック; 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 
});