我构建了一个带有下拉菜单的导航,
HTML 结构如下
<li class="c-header__subnav-item c-header__subnav-item-is-hidden c-header__subnav-item-is-visible-md">
<a class="c-header__subnav-links u-caps js-c-header__subnav-trigger" href="#">
Action Review Review
<i class="fa fa-angle-down fa-lg c-btn__icon-right-sm"></i>
</a>
<ul class="c-header__subnav-dd">
<li class="c-header__subnav-dd-item">
<a class="c-header__subnav-links c-header__subnav-links--dd" href="#">
Overview
</a>
</li>
<li class="c-header__subnav-dd-item">
<a class="c-header__subnav-links c-header__subnav-links--dd" href="#">
Review Form
</a>
</li>
<li class="c-header__subnav-dd-item">
<a class="c-header__subnav-links c-header__subnav-links--dd" href="#">
Performance Card
</a>
</li>
<li class="c-header__subnav-dd-item">
<a class="c-header__subnav-links c-header__subnav-links--dd" href="#">
Recent Recordings
</a>
</li>
</ul>
</li>
当您将鼠标悬停在 a.js-c-header__subnav-trigger 上时 它向其自身及其同级 ul 添加一个类(下拉菜单)
这是完美的,但由于悬停是在“a”元素上触发的,如果我在何时切换类并且将鼠标悬停在下拉菜单上,它会在我之前删除,因为悬停在“a”元素上。
如果我只是添加类而不使用切换,一旦我将鼠标悬停在 A 元素或下拉菜单上,我将如何删除这两个类。
需要实现的是
1.) 如果主导航链接悬停,则向其自身添加一个事件类,并触发下拉菜单并可见。如果您将鼠标悬停在没有参与下拉菜单的情况下,事件和下拉菜单类都会被删除
2.) 如果主导航链接悬停,则为其自身添加一个事件类,如果用户使用下拉菜单,则保留这两个类,直到下拉菜单悬停在“A”元素之外。
当前 JQUERY 代码
;(function($, window, document, undefined) {
var $win = $(window);
var $doc = $(document);
var $classes = {
SubNavTrigger : 'js-c-header__subnav-trigger',
SubNavItemActive : 'c-header__subnav-item-is-active',
SubNavDropDown : 'c-header__subnav-dd',
SubNavDropDownActive : 'c-header__subnav-dd-is-active'
};
var _isMobile = false;
_isMobile = ($win.width() <= 1024) ? true : false;
// Check if user is on touch on page load
// if isMobile use click events
// if not mobile use hover events
if(_isMobile) {
$("." + $classes.SubNavTrigger).on('click', function(){
if ( $(this).hasClass( $classes.SubNavItemActive ) ){
// If Item has active class removeClass
$(this).removeClass( $classes.SubNavItemActive )
} else {
// If Item does not have active class addClass
$(this).addClass($classes.SubNavItemActive);
} //End if
// Add Active Class To Subnav.
$(this).siblings().toggleClass($classes.SubNavDropDownActive);
});
} else {
$("." + $classes.SubNavTrigger).on('hover', function(){
$(this).addClass($classes.SubNavItemActive);
// Add Active Class To Subnav.
// If set to toggle impossible to hover on this menu.
$(this).siblings().addClass($classes.SubNavDropDownActive);
});
}
})(jQuery, window, document);
提前感谢您的帮助。
最佳答案
因此,我会进行一些更改,将 s-c-header__subnav-trigger
类移动到父 li
中。然后我将更改 jquery 以使用 hover(in,out) 。 in 函数看起来像
function () {
$(this).addClass($classes.SubNavItemActive);
// Add Active Class To Subnav.
$(this).children().addClass($classes.SubNavDropDownActive);
}
和外面
function () {
$(this).removeClass($classes.SubNavItemActive);
// Add Active Class To Subnav.
$(this).children().removeClass($classes.SubNavDropDownActive);
}
这是一个jsfiddle
关于javascript - 在悬停时的下拉菜单上删除和添加类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33046892/