在特定的div显示隐藏的内容?

时间:2014-06-12 16:11:02

标签: javascript jquery html css html5

我有一个主菜单。此主菜单打开隐藏的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中是否有一种方法可以重新隐藏隐藏的内容?

1 个答案:

答案 0 :(得分:1)

一个简单的解决方法,

以下代码找到第一个/开始的菜单项 - a:first选择器并触发点击它。

$('#menu nav a').click(function() {
    $('.draggable').hide();
    $(this.getAttribute('href')).show().find('nav a:first').click();

});

这将永远打开<a>的{​​{1}}。

适用于您的网站链接。在控制台中试过。