您好我已经创建了一个菜单，您可以选择＆＃34; mouseover＆＃34;或＆＃34;点击＆＃34;事件。
请参阅：
<ul class="nav nav-pills nav-justified keyword-navigation">
<li class="active"><a href="#" data-displaypanel="#subjectcollection_A_C">A- C</a></li>
<li class=""><a href="#" data-displaypanel="#subjectcollection_D_H">D-H</a></li>
<li><a href="#" data-displaypanel="#subjectcollection_I_N">I-N</a></li>
...
进行选择的结果是我希望它淡出前一个/现有的选定元素，并淡入具有与data-displaypanel属性指定的id匹配的所选元素。
这很好......
<ul class="topic-blocks list-unstyled">
<li class="keyword-panel" id="subjectcollection_A_C" style="display: list-
....
</li>
<li class="keyword-panel" id="subjectcollection_D_H" style="display: list-
....
</li>
然而，当您在不同菜单项之间快速鼠标悬停时，它似乎取消了fadeOut功能，然后才有机会完成，因此可以看到多个元素....
有没有办法解决这个问题？我尝试了各种不同的方法，没有运气。
$(".keyword-navigation li > a").on('click mouseenter', function(e) {
e.preventDefault();
var ithis = $(this);
if (!ithis.parent('li').hasClass('active')){
var prevActivePanel = ithis.closest('.keyword-navigation')
.find('.active')
.removeClass('active')
.children('a')
.data('displaypanel'),
currentActivePanel= ithis.parent('li')
.addClass('active')
.end()
.data('displaypanel');
$(prevActivePanel).fadeOut( "fast", function() {
$(this).addClass('hidden');
$(currentActivePanel)
.fadeIn( "fast", function() {
history.pushState(null, null, currentActivePanel);
}).removeClass('hidden');
});
}
});
看我的jsfiddle： https://jsfiddle.net/angusgrant/ov2zezmv/
非常感谢安格斯
答案 0 :(得分：0)
很快就会触发mouseenter事件。在这种情况下，您可以使用debounce(fn, wait)功能。您还可以查看can-someone-explain-the-debounce-function-in-javascript
如果要在动画中停止不受影响的mouseenter事件（不进行去抖动），则需要更改以下行：
$(prevActivePanel).fadeOut("fast", function() {
为：
$(prevActivePanel).stop().fadeOut("fast", function() {
.stop()的作用是：停止匹配元素上当前正在运行的动画。
摘录：
$(document).ready(function() {
$(".js-keyword-navigation li > a:not(.disabled)").on('click mouseenter', function(e) {
e.preventDefault();
var ithis = $(this),
keywordNav = ithis.closest('.js-keyword-navigation');
if (!ithis.parent('li').hasClass('active')) {
keywordNav.find('a').addClass('disabled');
var prevActivePanel = keywordNav
.find('.active')
.removeClass('active')
.children('a')
.data('displaypanel'),
currentActivePanel = ithis.parent('li')
.addClass('active')
.end()
.data('displaypanel');
$(prevActivePanel).stop().fadeOut("fast", function() {
var ithis = $(this);
ithis.addClass('hidden');
//console.log('previous Active Panel faded out:' + prevActivePanel);
$(currentActivePanel)
.fadeIn("fast", function() {
history.pushState(null, null, currentActivePanel);
$(this).removeClass('hidden');
//console.log('current Active Panel faded in:' + currentActivePanel);
keywordNav.find('a').removeClass('disabled');
})
});
}
});
//check if hash url exists and check an element exists in the DOM that also has the class 'keyword-panel'.
if (document.location.hash.length > 0 && $(document.location.hash).hasClass('keyword-panel')) {
// console.log('hash detected:' + document.location.hash);
$(".js-keyword-navigation li > a[data-displaypanel=" + document.location.hash + "]").trigger('click');
}
});<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="subjectscontainer panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
<i class="fa fa-hashtag"></i>
Topics
</h3>
</div>
<div class="panel-body keyword-display">
<ul class="nav nav-pills nav-justified js-keyword-navigation">
<li class=""><a href="#" data-displaypanel="#subjectcollection_A_C" class="">A-C</a></li>
<li><a href="#" data-displaypanel="#subjectcollection_D_H" class="">D-H</a></li>
<li><a href="#" data-displaypanel="#subjectcollection_I_N" class="">I-N</a></li>
<li class="active"><a href="#" data-displaypanel="#subjectcollection_O_R" class="">O-R</a></li>
<li><a href="#" data-displaypanel="#subjectcollection_S_Z" class="">S-Z</a></li>
</ul>
<ul class="topic-blocks list-unstyled">
<li class="keyword-panel hidden" id="subjectcollection_A_C" style="display: none;">
<ul class="col-sm-3 col-xs-6 list-unstyled">
<li><a href="/pub2web/search?value1=Acoustics&option1=fulltext" title="">Acoustics</a></li>
<li><a href="/pub2web/search?value1=Agricultural+Economics+%26+Policy&option1=fulltext" title="">Agricultural Economics & Policy</a></li>
<li><a href="/pub2web/search?value1=Agricultural+Engineering&option1=fulltext" title="">Agricultural Engineering</a></li>
<li><a href="/pub2web/search?value1=Agriculture&option1=fulltext" title="">Agriculture</a></li>
<li><a href="/pub2web/search?value1=Agriculture%2C+Dairy+%26+Animal+Science&option1=fulltext" title="">Agriculture, Dairy & Animal Science</a></li>
<li><a href="/pub2web/search?value1=Agriculture%2C+Multidisciplinary&option1=fulltext" title="">Agriculture, Multidisciplinary</a></li>
<li><a href="/pub2web/search?value1=Agronomy&option1=fulltext" title="">Agronomy</a></li>
<li><a href="/pub2web/search?value1=Allergy&option1=fulltext" title="">Allergy</a></li>
<li><a href="/pub2web/search?value1=Anatomy+%26+Morphology&option1=fulltext" title="">Anatomy & Morphology</a></li>
<li><a href="/pub2web/search?value1=Andrology&option1=fulltext" title="">Andrology</a></li>
<li><a href="/pub2web/search?value1=Anesthesiology&option1=fulltext" title="">Anesthesiology</a></li>
<li><a href="/pub2web/search?value1=Anthropology&option1=fulltext" title="">Anthropology</a></li>
<li><a href="/pub2web/search?value1=Archaeology&option1=fulltext" title="">Archaeology</a></li>
<li><a href="/pub2web/search?value1=Architecture&option1=fulltext" title="">Architecture</a></li>
<li><a href="/pub2web/search?value1=Area+Studies&option1=fulltext" title="">Area Studies</a></li>
<li><a href="/pub2web/search?value1=Art&option1=fulltext" title="">Art</a></li>
</ul>
<ul class="col-sm-3 col-xs-6 list-unstyled">
<li><a href="/pub2web/search?value1=Arts+%26+Humanities+-+Other+Topics&option1=fulltext" title="">Arts & Humanities - Other Topics</a></li>
<li><a href="/pub2web/search?value1=Asian+Studies&option1=fulltext" title="">Asian Studies</a></li>
<li><a href="/pub2web/search?value1=Astronomy+%26+Astrophysics&option1=fulltext" title="">Astronomy & Astrophysics</a></li>
<li><a href="/pub2web/search?value1=Audiology+%26+Speech-Language+Pathology&option1=fulltext" title="">Audiology & Speech-Language Pathology</a></li>
<li><a href="/pub2web/search?value1=Automation+%26+Control+Systems&option1=fulltext" title="">Automation & Control Systems</a></li>
<li><a href="/pub2web/search?value1=Behavioral+Sciences&option1=fulltext" title="">Behavioral Sciences</a></li>
<li><a href="/pub2web/search?value1=Biochemical+Research+Methods&option1=fulltext" title="">Biochemical Research Methods</a></li>
<li><a href="/pub2web/search?value1=Biochemistry+%26+Molecular+Biology&option1=fulltext" title="">Biochemistry & Molecular Biology</a></li>
<li><a href="/pub2web/search?value1=Biodiversity+Conservation&option1=fulltext" title="">Biodiversity Conservation</a></li>
<li><a href="/pub2web/search?value1=Biodiversity+%26+Conservation&option1=fulltext" title="">Biodiversity & Conservation</a></li>
<li><a href="/pub2web/search?value1=Biology&option1=fulltext" title="">Biology</a></li>
<li><a href="/pub2web/search?value1=Biomedical+Social+Sciences&option1=fulltext" title="">Biomedical Social Sciences</a></li>
<li><a href="/pub2web/search?value1=Biophysics&option1=fulltext" title="">Biophysics</a></li>
<li><a href="/pub2web/search?value1=Biotechnology+%26+Applied+Microbiology&option1=fulltext" title="">Biotechnology & Applied Microbiology</a></li>
<li><a href="/pub2web/search?value1=Business&option1=fulltext" title="">Business</a></li>
<li><a href="/pub2web/search?value1=Business+%26+Economics&option1=fulltext" title="">Business & Economics</a></li>
</ul>
<ul class="col-sm-3 col-xs-6 list-unstyled">
<li><a href="/pub2web/search?value1=Business%2C+Finance&option1=fulltext" title="">Business, Finance</a></li>
<li><a href="/pub2web/search?value1=Cardiac+%26+Cardiovascular+Systems&option1=fulltext" title="">Cardiac & Cardiovascular Systems</a></li>
<li><a href="/pub2web/search?value1=Cardiovascular+System+%26+Cardiology&option1=fulltext" title="">Cardiovascular System & Cardiology</a></li>
<li><a href="/pub2web/search?value1=Cell+Biology&option1=fulltext" title="">Cell Biology</a></li>
<li><a href="/pub2web/search?value1=Cell+%26+Tissue+Engineering&option1=fulltext" title="">Cell & Tissue Engineering</a></li>
<li><a href="/pub2web/search?value1=Clinical+Neurology&option1=fulltext" title="">Clinical Neurology</a></li>
<li><a href="/pub2web/search?value1=Communication&option1=fulltext" title="">Communication</a></li>
</ul>
<ul class="col-sm-3 col-xs-6 list-unstyled">
<li><a href="/pub2web/search?value1=Computer+Science&option1=fulltext" title="">Computer Science</a></li>
<li><a href="/pub2web/search?value1=Computer+Science%2C+Artificial+Intelligence&option1=fulltext" title="">Computer Science, Artificial Intelligence</a></li>
<li><a href="/pub2web/search?value1=Computer+Science%2C+Cybernetics&option1=fulltext" title="">Computer Science, Cybernetics</a></li>
<li><a href="/pub2web/search?value1=Computer+Science%2C+Hardware+%26+Architecture&option1=fulltext" title="">Computer Science, Hardware & Architecture</a></li>
<li><a href="/pub2web/search?value1=Crystallography&option1=fulltext" title="">Crystallography</a></li>
<li><a href="/pub2web/search?value1=Cultural+Studies&option1=fulltext" title="">Cultural Studies</a></li>
</ul>
</li>
<li class="keyword-panel hidden" id="subjectcollection_D_H">
<ul class="col-sm-3 col-xs-6 list-unstyled">
<li><a href="/pub2web/search?value1=Dance&option1=fulltext" title="">Dance</a></li>
<li><a href="/pub2web/search?value1=Demography&option1=fulltext" title="">Demography</a></li>
<li><a href="/pub2web/search?value1=Dentistry%2C+Oral+Surgery+%26+Medicine&option1=fulltext" title="">Dentistry, Oral Surgery & Medicine</a></li>
<li><a href="/pub2web/search?value1=Dermatology&option1=fulltext" title="">Dermatology</a></li>
<li><a href="/pub2web/search?value1=Developmental+Biology&option1=fulltext" title="">Developmental Biology</a></li>
<li><a href="/pub2web/search?value1=Ecology&option1=fulltext" title="">Ecology</a></li>
<li><a href="/pub2web/search?value1=Engineering%2C+Aerospace&option1=fulltext" title="">Engineering, Aerospace</a></li>
</ul>
<ul class="col-sm-3 col-xs-6 list-unstyled">
<li><a href="/pub2web/search?value1=Engineering%2C+Biomedical&option1=fulltext" title="">Engineering, Biomedical</a></li>
<li><a href="/pub2web/search?value1=Engineering%2C+Chemical&option1=fulltext" title="">Engineering, Chemical</a></li>
<li><a href="/pub2web/search?value1=Engineering%2C+Civil&option1=fulltext" title="">Engineering, Civil</a></li>
<li><a href="/pub2web/search?value1=Engineering%2C+Electrical+%26+Electronic&option1=fulltext" title="">Engineering, Electrical & Electronic</a></li>
<li><a href="/pub2web/search?value1=Engineering%2C+Environmental&option1=fulltext" title="">Engineering, Environmental</a></li>
<li><a href="/pub2web/search?value1=Engineering%2C+Geological&option1=fulltext" title="">Engineering, Geological</a></li>
<li><a href="/pub2web/search?value1=Environmental+Sciences&option1=fulltext" title="">Environmental Sciences</a></li>
<li><a href="/pub2web/search?value1=Environmental+Sciences+%26+Ecology&option1=fulltext" title="">Environmental Sciences & Ecology</a></li>
</ul>
<ul class="col-sm-3 col-xs-6 list-unstyled">
<li><a href="/pub2web/search?value1=Environmental+Studies&option1=fulltext" title="">Environmental Studies</a></li>
<li><a href="/pub2web/search?value1=Ergonomics&option1=fulltext" title="">Ergonomics</a></li>
<li><a href="/pub2web/search?value1=Ethics&option1=fulltext" title="">Ethics</a></li>
<li><a href="/pub2web/search?value1=Ethnic+Studies&option1=fulltext" title="">Ethnic Studies</a></li>
<li><a href="/pub2web/search?value1=Genetics+%26+Heredity&option1=fulltext" title="">Genetics & Heredity</a></li>
<li><a href="/pub2web/search?value1=Geochemistry+%26+Geophysics&option1=fulltext" title="">Geochemistry & Geophysics</a></li>
</ul>
<ul class="col-sm-3 col-xs-6 list-unstyled">
<li><a href="/pub2web/search?value1=Geography&option1=fulltext" title="">Geography</a></li>
<li><a href="/pub2web/search?value1=Geography%2C+Physical&option1=fulltext" title="">Geography, Physical</a></li>
<li><a href="/pub2web/search?value1=Geology&option1=fulltext" title="">Geology</a></li>
<li><a href="/pub2web/search?value1=Geosciences%2C+Multidisciplinary&option1=fulltext" title="">Geosciences, Multidisciplinary</a></li>
<li><a href="/pub2web/search?value1=Geriatrics+%26+Gerontology&option1=fulltext" title="">Geriatrics & Gerontology</a></li>
<li><a href="/pub2web/search?value1=Gerontology&option1=fulltext" title="">Gerontology</a></li>
<li><a href="/pub2web/search?value1=Humanities%2C+Multidisciplinary&option1=fulltext" title="">Humanities, Multidisciplinary</a></li>
</ul>
</li>
</ul>
</div>
</div>