基本上我一直在尝试使用jQuery来显示（）并隐藏（）我的内容中的子导航。我找到了单击按钮时显示和隐藏的代码，但是，我一直在尝试这样做，以便当单击一个导航按钮时，它将打开它下面的内容但是当单击该列表中的另一个导航按钮时之后，它会显示内容并隐藏上一个内容。
任何帮助将不胜感激。
子导航HTML
<ul id="subNav">
<li>
<a class="showSingle" target="1">
BLOMFIELD ROAD, 2012
<img src="images/sub-nav-1.jpg" alt="Blomfield Road 2012" />
</a>
</li>
<li>
<a class="showSingle" target="2">
KIDDERPORE GARDENS
<img src="images/sub-nav-2.jpg" alt="Kidderpore Gardens"/>
</a>
</li>
<li>
<a class="showSingle" target="3">
BLOMFIELD ROAD, 2010
<img src="images/sub-nav-3.jpg" alt="Blomfield Road 2010" />
</a>
</li>
<li>
<a class="showSingle" target="4">
CECILE PARK
<img src="images/sub-nav-4.jpg" alt="Cecile Park" />
</a>
</li>
<li>
<a class="showSingle" target="5">
LANSDOWNE ROAD
<img src="images/sub-nav-5.jpg" alt="Landsdowne Road" />
</a>
</li>
<li>
<a class="showSingle" target="6">
BLOMFIELD ROAD, 2007
<img src="images/sub-nav-6.jpg" alt="Blomfield Road 2007" />
</a>
</li>
<li>
<a class="showSingle" target="7">
HANOVER TERRACE
<img src="images/sub-nav-7.jpg" alt="Hanover Terrace" />
</a>
</li>
</ul>
</div> <!--END OF subHeader -->
内容HTML
<div id="div1" class="targetDiv">
<div class="content">
<p class="projHeader">
BLOMFIELD ROAD, 2012
</p>
<div class="sqBox"></div>
<p class="address">
2012, Little Venice, London W9
</p>
<p class="jobDescrip">
Complete strip out and refurbishment of
a fire damaged Grade II listed 4 storey building.
Including replacement of fire damaged wall
& floor structures, chemical cleaning to
remove smoke odours and reinstatement to
match original fit out.
</p>
<p class="projectCompletion">
<span class="pcCss">PROJECT COMPLETION</span> <br>
April 2011 – February 2012 (10 months)
</p>
<p class="architect">
<span class="title">ARCHITECT</span> <br>
<span class="company">Metropolitan Development Consultancy Ltd</span> <br>
<a href="www.mdclondon.com"> www.mdclondon.com </a>
</p>
<div class="spec">
<ul>
<li> Control 4 automation system </li>
<li> Bespoke joinery by Ottima </li>
<li> High specification M&E services </li>
<li> Lutron Homeworks lighting system </li>
<li> Poggenpohl kitchen by Nicholas Anthony </li>
<li> Air conditioning, audio visual & underfloor <br>
heating system automated via Control 4 system.
</li>
</ul>
</div> <!-- END OF spec -->
</div> <!-- END OF content -->
<div class="slideshow">
</div><!-- END OF slideshow -->
</div><!-- END OF div1 -->
<div id="div2" class="targetDiv">
<div class="content">
<p class="projHeader">
BLOMFIELD ROAD, 2012
</p>
<div class="sqBox"></div>
<p class="address">
2012, Little Venice, London W9
</p>
<p class="jobDescrip">
Complete strip out and refurbishment of
a fire damaged Grade II listed 4 storey building.
Including replacement of fire damaged wall
& floor structures, chemical cleaning to
remove smoke odours and reinstatement to
match original fit out.
</p>
<p class="projectCompletion">
<span class="pcCss">PROJECT COMPLETION</span>
April 2011 – February 2012 (10 months)
</p>
<p class="architect">
<span class="title">ARCHITECT</span> <br>
<span class="company">Metropolitan Development Consultancy Ltd</span> <br>
<a href="www.mdclondon.com"> www.mdclondon.com </a>
</p>
<div class="spec">
<ul>
<li> Control 4 automation system </li>
<li> Bespoke joinery by Ottima </li>
<li> High specification M&E services </li>
<li> Lutron Homeworks lighting system </li>
<li> Poggenpohl kitchen by Nicholas Anthony </li>
<li> Air conditioning, audio visual & underfloor <br>
heating system automated via Control 4 system.
</li>
</ul>
</div> <!-- END OF spec -->
</div> <!-- END OF content -->
<div class="slideshow">
</div><!-- END OF slideshow -->
</div> <!--END OF kpg -->
答案 0 :(得分：3)
在jQuery插件：jQuery UI中提供了名为accordion的好解决方案。 试着看看：http://jqueryui.com/demos/accordion/
答案 1 :(得分：0)
可以写一些额外的jQuery：
当您点击新项目时，您可以遍历其兄弟姐妹并查看其中是否有任何人当前处于活动状态。该活动兄弟的正常切换类为非活动，并使当前点击的项目处于活动状态
答案 2 :(得分：0)
我相信你正在寻找像 this 这样的东西。这只是一个示例，向您展示切换文章内容所涉及的jQuery，您应该根据您的具体情况对其进行调整。
<强> HTML ：
<div class="article">
<h1>TITLE 1</h1>
<div class="content">content 1</div>
</div>
<div class="article">
<h1>TITLE 2</h1>
<div class="content">content 2</div>
</div>
<div class="article">
<h1>TITLE 3</h1>
<div class="content">content 3</div>
</div>
<div class="article">
<h1>TITLE 4</h1>
<div class="content">content 4</div>
</div>
的 CSS ：
.content{
display:none;
margin: 10px;
}
h1{
font-size: 16px;
font-wieght: bold;
color: gray;
border: 1px solid black;
background: #eee;
padding: 5px;
}
h1:hover{
cursor: pointer;
color: black;
}
<强>的jQuery ：
$("h1").on("click", function(){
console.log($(this).children("div"));
$(this).siblings("div.content").slideToggle();
});
答案 3 :(得分：0)
您是否试图展示和隐藏targetDiv个？如果是这样，您可以使用类似
$('a.showSingle').click(function(e){
e.preventDefault();
$('div.targetDiv').hide().filter('#div' + $(this).attr('target')).show();
});
以下是一个示例：http://jsfiddle.net/TqtXz/