jquery - jQueryを使用して複数の表示および非表示のトグルボタンを作成するにはどうすればよいですか？

Question

基本的に、私はjQueryを使用してコンテンツのサブナビゲーションを表示（）および非表示（）しようとしています。ボタンがクリックされたときに表示および非表示になるコードを見つけましたが、1つのナビゲーションボタンがクリックされたときにその下のコンテンツが開き、そのリスト内の別のナビゲーションボタンがクリックされたときに表示されるようにしようとしていますその後、そのコンテンツを表示し、前のコンテンツを非表示にします。

どんな助けでも大歓迎です。

サブナビゲーション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アドオンで提供されています：jQueryUI。これを見てみてください：http：//jqueryui.com/demos/accordion/

Answer 2

追加のjQueryを作成することは可能です。

新しいアイテムをクリックすると、その兄弟をトラバースして、それらのいずれかが現在アクティブであるかどうかを確認できます。そのアクティブな兄弟のクラスを非アクティブに切り替えて、現在クリックされているアイテムをアクティブにするだけです。

Answer 3

私はあなたがこのようなものを探していると信じています。これは、記事のコンテンツを切り替えるために必要な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/