3

基本上我一直在尝试使用 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 -->
4

4 回答 4

3

jQuery 插件中提供了一个名为手风琴的好解决方案：jQuery UI。试试看这个：http: //jqueryui.com/demos/accordion/

于 2012-10-05T18:24:19.693 回答
0

可以编写一些额外的 jQuery：

当您单击一个新项目时，您可以遍历其兄弟姐妹并查看其中是否有人当前处于活动状态。该活动同级的 just switch 类为inactive，并使当前单击的项目处于活动状态

于 2012-10-05T18:27:18.193 回答
0

我相信你正在寻找这样的东西。这只是一个示例，向您展示了切换文章内容所涉及的 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();
});​
于 2012-10-05T18:33:21.733 回答
0

您是否要显示和隐藏那些targetDivs？如果是这样，您可以使用类似的东西

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

这是一个例子：http: //jsfiddle.net/TqtXz/

于 2012-10-05T18:41:03.967 回答