JS需要操纵的两个元素:
<li class="navTab myFirstTab Popup PopupControl PopupOpen PopupContainerControl">
对于上述元素:
我希望OnMouseHover替换类值:
PopupClose与PopupOpen
<div class="Menu JsOnly tabMenu myFirstTabLinks" id="XenForoUniq0" style="display: block; visibility: visible; top: 96px; left: 960.5px;">
同时,以上元素的style属性将其值更改为:
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 DropDown2</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 -->
将数据目标属性添加到您的标签链接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
});
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句