如何使用jQuery創建多個顯示和隱藏切換按鈕？

Question

基本上我一直在嘗試使用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&amp;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&amp;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 --> 

Answer 1

尼斯溶液稱爲手風琴jQuery中附加提供：jQuery的UI。 嘗試看看這個：http://jqueryui.com/demos/accordion/

Answer 2

有可能寫一些額外的jQuery：

當你點擊一個新的項目，你可以穿越它的兄弟姐妹，看看是否有任何人是目前活躍。剛剛切換類活躍的兄弟姐妹到不活躍，使目前點擊項目活躍

Answer 3

我相信你正在尋找的東西像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(); 
});​ 

Answer 4

是你試圖顯示並隱藏那些targetDiv？如果是這樣，你可以使用像

$('a.showSingle').click(function(e){ 
    e.preventDefault(); 
    $('div.targetDiv').hide().filter('#div' + $(this).attr('target')).show(); 
}); 

下面是一個例子：http://jsfiddle.net/TqtXz/