如何使用jQuery创建多个显示/隐藏切换按钮？

Question

如何使用jQuery创建多个显示/隐藏切换按钮？

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 -->

- user1719977

1

这里的翻译似乎有些遗漏。您想要每次点击按钮时显示什么？如果从目标到您想要显示的内容之间存在关联，那么这将非常简单。更多信息会很有帮助。 - O'Mutt

4个回答

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();
});

- Chase

0

你想要显示和隐藏那些targetDiv吗？如果是的话，你可以使用类似以下的代码：

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

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

- Laurence

0

可以编写一些额外的jQuery代码：

当您单击新项目时，可以遍历其兄弟节点并查看它们中是否有任何一个当前处于活动状态。然后将该活动兄弟节点的类切换为非活动，并使当前单击的项目活动

- kumarharsh

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Radim Köhler · Accepted Answer

jQuery UI提供了一个名为"手风琴"的不错解决方案。可以通过以下链接查看：http://jqueryui.com/demos/accordion/