我们需要能够根据当前悬停的元素隐藏和显示元素。我们在下面尝试了以下内容,但它没有添加 is-active
类并根据悬停的其他元素将其删除。
我们如何根据当前悬停的元素隐藏和显示元素?
目标(基于以下示例):
- 当您将鼠标悬停在
some
上时在first
下, 显示<div class="two" id="some-link">some link</div>
使用is-active
类 - 当您将鼠标悬停在
path
上时在first
下,<div class="two" id="some-link">some linke</div>
不应显示(删除is-active
类)和<div class="two" id="path-link">path link</div>
应该显示(添加is-active
类)
当前问题:
-
is-active
更改悬停元素时不会删除类
$(function() {
$('li#two').hover( function() {
var el_two = $(this);
var el_id = el_two.attr('id');
var el_link = el_two.attr('data-at');
var el_sel = '#'+el_link+'.'+ el_id;
var el_parent = el_two.parent().parent();
el_parent.find('.is-active').removeClass('is-active');
$(el_sel).addClass('is-active');
});
});
.two {
display: none;
}
.is-active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li id="one">
<a href="#"> first</a>
<div class="one">
<ul>
<li data-at="some-link" id="two">
<a href="#"> some</a>
</li>
<li data-at="path-link" id="two">
<a href="#"> path</a>
</li>
<li data-at="another-one" id="two">
<a href="#"> another one</a>
</li>
</ul>
<div class="dropdown">
<div class="two" id="some-link">some link text</div>
<div class="two" id="path-link">path link</div>
<div class="two" id="another-one">another one</div>
</div>
</div>
</li>
<li id="one">
<a href="#"> second</a>
<div class="one">
<ul>
<li>
<a href="#"> another some</a>
</li>
<li>
<a href="#"> another path</a>
</li>
</ul>
</div>
</li>
<li id="one">
<a href="#"> third</a>
<div class="one">
<ul>
<li>
<a href="#"> third some</a>
</li>
<li>
<a href="#"> third path</a>
</li>
</ul>
</div>
</li>
</ul>
最佳答案
首先,您的 .find()
使用了错误的选择器。您有 find('is-active')
,这是一个元素名称选择器,您想要一个 css 类选择器,即 .is-active
。
el_parent.find('.is-active').removeClass('is-active');
注意 removeClass()
你不使用 css 选择器你只使用类名因此你不需要在那个调用中的点
现在,如果您还想在鼠标悬停在元素之外时删除该类,那么您需要为此添加一个事件监听器,并从那里调用 removeClass。 .hover()
使用第二个参数来设置此类事件监听器回调。
$('li#two').hover(onHoverCallback,function(){
//code for finding the right element
$(el_sel).removeClass('is-active');
})
$(function() {
$('li#two').hover( function() {
var el_two = $(this);
var el_id = el_two.attr('id');
var el_link = el_two.attr('data-at');
var el_sel = '#'+el_link+'.'+ el_id;
var el_parent = el_two.parent().parent();
el_parent.find('.is-active').removeClass('is-active');
$(el_sel).addClass('is-active');
},function(){
var el_two = $(this);
var el_id = el_two.attr('id');
var el_link = el_two.attr('data-at');
var el_sel = '#'+el_link+'.'+ el_id;
$(el_sel).removeClass("is-active");
});
});
.two {
display: none;
}
.is-active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li id="one">
<a href="#"> first</a>
<div class="one">
<ul>
<li data-at="some-link" id="two">
<a href="#"> some</a>
</li>
<li data-at="path-link" id="two">
<a href="#"> path</a>
</li>
<li data-at="another-one" id="two">
<a href="#"> another one</a>
</li>
</ul>
<div class="dropdown">
<div class="two" id="some-link">some link text</div>
<div class="two" id="path-link">path link</div>
<div class="two" id="another-one">another one</div>
</div>
</div>
</li>
<li id="one">
<a href="#"> second</a>
<div class="one">
<ul>
<li>
<a href="#"> another some</a>
</li>
<li>
<a href="#"> another path</a>
</li>
</ul>
</div>
</li>
<li id="one">
<a href="#"> third</a>
<div class="one">
<ul>
<li>
<a href="#"> third some</a>
</li>
<li>
<a href="#"> third path</a>
</li>
</ul>
</div>
</li>
</ul>
关于javascript - 如何根据当前悬停的元素隐藏和显示元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52304738/