请参阅此处，例如Link To Site
如果你点击页面顶部地图上的状态illiois然后做同样的事情，但点击印第安纳页面将滚过印第安纳h2。我如何解决这个问题，以便元素关闭每个h2下的隐藏链接并滚动到特定元素并再次打开它。例如，请访问该网站，这将是有意义的
这是我的HTML和功能
function coverageAreaMenu(){
$('.secondaryNav > li > a >h2').click(function(){
if ($(this).attr('class') != 'active'){
$('.secondaryNav li ul').slideUp();
$(this).next().slideToggle();
$('.secondaryNav li a h2').removeClass('active');
$(this).addClass('active');
}
else {
$(this).next().slideToggle();
}
});
$('.map ul li').click(function() {
var name = $(this).attr('class');
name = name.toLowerCase().replace(/\b[a-z]/g, function(letter) {
return letter.toUpperCase();
});
$('html, body').animate({
scrollTop: ($('#' + name).offset().top)
}, 1000);
$('#' + name + ">h2").trigger('click');
});
}
<ul class="contentBanner">
<li>
<div class="map">
<img src="/assets/img/banners/coverageMap.png"/>
<ul>
<li class="michigan"><a href="#Michigan"><img src="/assets/img/banners/banner15-Michigan.png"/></a></li>
<li class="illinois"><a href="#Illinois"><img src="/assets/img/banners/banner15-Illinois.png"/></a></li>
<li class="indiana"><a href="#Indiana"><img src="/assets/img/banners/banner15-Indiana.png"/></a></li>
<li class="iowa"><a href="#Iowa"><img src="/assets/img/banners/banner15-Iowa.png"/></a></li>
<li class="kentucky"><a href="#Kentucky"><img src="/assets/img/banners/banner15-Kentucky.png"/></a></li>
<li class="michigan"><a href="#Michigan"><img src="/assets/img/banners/banner15-Michigan.png"/></a></li>
<li class="minnesota"><a href="#Minnesota"><img src="/assets/img/banners/banner15-Minnesota.png"/></a></li>
<li class="missouri"><a href="#Missouri"><img src="/assets/img/banners/banner15-Missouri.png"/></a></li>
<li class="nebraska"><a href="#Nebraska"><img src="/assets/img/banners/banner15-Nebraska.png"/></a></li>
<li class="ohio"><a href="#Ohio"><img src="/assets/img/banners/banner15-Ohio.png"/></a></li>
<li class="pennsylvania"><a href="#Pennsylvania"><img src="/assets/img/banners/banner15-Pennsylvania.png"/></a></li>
<li class="tennessee"><a href="#Tennessee"><img src="/assets/img/banners/banner15-Tennessee.png"/></a></li>
<li class="wisconsin"><a href="#Wisonsin"><img src="/assets/img/banners/banner15-Wisconsin.png"/></a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<!--Main Content Images and Text-->
<!--<div class="section cont">
<div class="row">
<div class="col_06">
<ul class="slides">
<li><img src="/assets/img/images/ourMotoAnt.png" /><br>Our Moto</li>
<li><img src="/assets/img/images/ourIndustries2.png" /><br>Our Industries</li>
<li><img src="/assets/img/images/coverageArea.png" /><br>Coverage Area</li>
<li><img src="/assets/img/images/productShowcase.png" /><br>Product Showcase</li>
<li><img src="/assets/img/images/integratedPestManagement.png" /><br>Integrated Pest Management</li>
</ul>
</div>
</div>
</div>-->
<!--Main Content Images and Text-->
<div class="section mainContent cf">
<div class="row">
<div class="col_06">
<div class="coverageArea cf">
{#Content;}
<ul class="secondaryNav">
<li><a id="Illinois"><h2>Illinois</h2></a>
<ul style="display:none;">
<li><a href="/milling">Employee 1</a></li>
<li><a href="/grain">Employee 2</a></li>
<li><a href="/seed">Employee 3</a></li>
<li><a href="/organic">Employee 4</a></li>
<li><a href="/food-processing">Employee 5</a></li>
<li><a href="/export_import">Employee 6</a></li>
</ul>
</li>
<li><a id="Indiana"><h2>Indiana</h2></a>
<ul style="display:none;">
<li><a href="/milling">Milling</a></li>
<li><a href="/grain">Grain</a></li>
<li><a href="/seed">Seed</a></li>
<li><a href="/organic">Organic</a></li>
<li><a href="/food-processing">Food Processing</a></li>
<li><a href="/export_import">Export/Import</a></li>
</ul>
</li>
<li><a id="Iowa"><h2>Iowa</h2></a>
<ul style="display:none;">
<li><a href="/milling">Milling</a></li>
<li><a href="/grain">Grain</a></li>
<li><a href="/seed">Seed</a></li>
<li><a href="/organic">Organic</a></li>
<li><a href="/food-processing">Food Processing</a></li>
<li><a href="/export_import">Export/Import</a></li>
</ul>
</li>
<li><a id="Kentucky"><h2>Kentucky</h2></a>
<ul style="display:none;">
<li><a href="/milling">Milling</a></li>
<li><a href="/grain">Grain</a></li>
<li><a href="/seed">Seed</a></li>
<li><a href="/organic">Organic</a></li>
<li><a href="/food-processing">Food Processing</a></li>
<li><a href="/export_import">Export/Import</a></li>
</ul>
</li>
<li><a id="Michigan"><h2>Michigan</h2></a>
<ul style="display:none;">
<li><a href="/milling">Milling</a></li>
<li><a href="/grain">Grain</a></li>
<li><a href="/seed">Seed</a></li>
<li><a href="/organic">Organic</a></li>
<li><a href="/food-processing">Food Processing</a></li>
<li><a href="/export_import">Export/Import</a></li>
</ul>
</li>
<li><a id="Minnesota"><h2>Minnesota</h2></a>
<ul style="display:none;">
<li><a href="/milling">Milling</a></li>
<li><a href="/grain">Grain</a></li>
<li><a href="/seed">Seed</a></li>
<li><a href="/organic">Organic</a></li>
<li><a href="/food-processing">Food Processing</a></li>
<li><a href="/export_import">Export/Import</a></li>
</ul>
</li>
<li><a id="Missouri"><h2>Missouri</h2></a>
<ul style="display:none;">
<li><a href="/milling">Milling</a></li>
<li><a href="/grain">Grain</a></li>
<li><a href="/seed">Seed</a></li>
<li><a href="/organic">Organic</a></li>
<li><a href="/food-processing">Food Processing</a></li>
<li><a href="/export_import">Export/Import</a></li>
</ul>
</li>
<li><a id="Nebraska"><h2>Nebraska</h2></a>
<ul style="display:none;">
<li><a href="/milling">Milling</a></li>
<li><a href="/grain">Grain</a></li>
<li><a href="/seed">Seed</a></li>
<li><a href="/organic">Organic</a></li>
<li><a href="/food-processing">Food Processing</a></li>
<li><a href="/export_import">Export/Import</a></li>
</ul>
</li>
<li><a id="Ohio"><h2>Ohio</h2></a>
<ul style="display:none;">
<li><a href="/milling">Milling</a></li>
<li><a href="/grain">Grain</a></li>
<li><a href="/seed">Seed</a></li>
<li><a href="/organic">Organic</a></li>
<li><a href="/food-processing">Food Processing</a></li>
<li><a href="/export_import">Export/Import</a></li>
</ul>
</li>
<li><a id="Pennsylvania"><h2>Pennsylvania</h2></a>
<ul style="display:none;">
<li><a href="/milling">Milling</a></li>
<li><a href="/grain">Grain</a></li>
<li><a href="/seed">Seed</a></li>
<li><a href="/organic">Organic</a></li>
<li><a href="/food-processing">Food Processing</a></li>
<li><a href="/export_import">Export/Import</a></li>
</ul>
</li>
<li><a id="Tennessee"><h2>Tennessee</h2></a>
<ul style="display:none;">
<li><a href="/milling">Milling</a></li>
<li><a href="/grain">Grain</a></li>
<li><a href="/seed">Seed</a></li>
<li><a href="/organic">Organic</a></li>
<li><a href="/food-processing">Food Processing</a></li>
<li><a href="/export_import">Export/Import</a></li>
</ul>
</li>
<li><a id="Wisconsin"><h2>Wisconsin</h2></a>
<ul style="display:none;">
<li><a href="/milling">Milling</a></li>
<li><a href="/grain">Grain</a></li>
<li><a href="/seed">Seed</a></li>
<li><a href="/organic">Organic</a></li>
<li><a href="/food-processing">Food Processing</a></li>
<li><a href="/export_import">Export/Import</a></li>
</ul>
</li>
</ul>
答案 0 :(得分：0)
问题是你正在滚动到印第安纳州标题的位置，而伊利诺伊州的部分仍在扩大。
你需要等待伊利诺伊州的收藏品在滚动到印第安纳州的标题之前崩溃，或者计算一旦崩溃发生在印第安纳州的标题会在哪里崩溃。
请注意，如果您从干净的页面刷新开始（所有部分都已折叠），则不会出现问题中描述的错误。当导航到当前活动（扩展）部分之前的部分时，也不会发生该错误。
您可以尝试组合这些功能，以便在切换部分时页面在完成时滚动到它：
$('.secondaryNav > li > a > h2').on('click', function(){
var $this = $(this),
$ul = $this.next();
if (!$this.hasClass('active')){
$('.secondaryNav > li > ul').stop(true).not($ul).slideUp();
$ul.slideDown(function() {
$('html, body').animate({
scrollTop: $this.parent().offset().top
}, 1000);
});
$('.secondaryNav > li > a > h2').removeClass('active');
$this.addClass('active');
}
else {
$this.removeClass('active');
$ul.slideUp();
}
});
$('.map ul li').on('click', function() {
var name = $(this).attr('class');
name = name.toLowerCase().replace(/\b[a-z]/g, function(letter) {
return letter.toUpperCase();
});
$('#' + name + ' > h2').trigger('click');
});
注意：这是一个快速未经测试的示例，说明您可以走哪条路线。它可以很容易地进一步优化。