[英]Displaying a dropdown menu on hover and replacing CSS classes
Two elements that needs to be manipulated with JS: 需要使用JS操作的两个元素:
<li class="navTab myFirstTab Popup PopupControl PopupOpen PopupContainerControl">
For the above element: 对于上面的元素:
I want OnMouseHover to replace the class value: 我希望OnMouseHover替换类值:
PopupClose with PopupOpen 使用PopupOpen弹出关闭
<div class="Menu JsOnly tabMenu myFirstTabLinks" id="XenForoUniq0" style="display: block; visibility: visible; top: 96px; left: 960.5px;">
At the same time, the above element style attribute to change its value from: 同时,上面的元素样式属性可以从以下位置更改其值:
display: none; display:none; to display: block; 显示:块;
Sample of HTML structure: 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 -->
Add data-target attributes to your tablinks div.. similar to below 将数据目标属性添加到tablinks div ..类似于下面
<li class="navTab myFirstTab Popup PopupControl PopupClosed PopupContainerControl" data-target="myFirstTabLinks">
<li class="navTab mySecondTab Popup PopupControl PopupClosed PopupContainerControl" data-target="mySecondTabLinks">
Now 现在
$('.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
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.