我有一个主菜单。此主菜单打开隐藏的div,其中还包含显示和隐藏内容的内部菜单。
您可以在此处查看此操作:http://shirleycollinsmovie.com/collins-html5/index.html#about
用户可以从主菜单中选择并打开其中一个隐藏的div,然后浏览内部菜单的内容。
然而,当用户关闭隐藏的div然后打开一个新的div时,再次返回到前一个div,而不是再次从头开始显示内容,它会显示它们之前离开隐藏div时的确切位置。我希望它再次从头开始显示内容。
这是我的代码,它显示了主菜单中隐藏的div(我也使用相同的内部菜单代码):
$('#menu nav a').click(function() {
$('.draggable').hide();
$(this.getAttribute('href')).show()
});
<div id="menu">
<h1>main header</h1>
<nav>
<a id="about-link" href="#about">About</a>
<a id="news-link" href="#news">News</a>
<a id="foundation-link" href="#foundation">Foundation</a>
<a id="contact-link" href="#contact-info">Contact</a>
</nav></div>
<div id="foundation" class="hidden draggable-scroll">
<div id="foundation-nav" class="box-text">
<nav>
<a href="#the-story" class="current-foundation">The Story so Far</a>
<a href="#what">What will the Foundation do?</a>
<a href="#manifesto">The Manifesto</a>
<a href="#who">Who is the Foundation?</a>
</nav>
</div>
<div id="foundation-opening" class="box-text foundation-info">
<h2>header </h2>
<p>
</p></div>
<div id="the-story" class="box-text foundation-info hidden">
<h2>The Story so far: </h2>
<p>
And she’s not done yet,</p>
</div>
<div id="what" class="box-text foundation-info hidden">
<p>
The Ballad of </p>
</div>
<div id="manifesto" class="box-text foundation-info hidden">
<h2>The proposed Manifesto: </h2>
<p>
The reason for the foundation to exist: </p>
</div>
<div id="who" class="box-text foundation-info hidden">
<h2>Who is the Foundation?</h2>
<p> </p>
</div>
<div class="close-box">
<a href="#">x</a></div>
</div>
也许有一种方法可以从主菜单的href中定位起始内容?
或者当用户再次从主菜单中选择时,jQuery中是否有一种方法可以重新隐藏隐藏的内容?
答案 0 :(得分:1)
一个简单的解决方法,
以下代码找到第一个/开始的菜单项 - a:first
选择器并触发点击它。
$('#menu nav a').click(function() {
$('.draggable').hide();
$(this.getAttribute('href')).show().find('nav a:first').click();
});
这将永远打开<a>
的{{1}}。
适用于您的网站链接。在控制台中试过。