Question

我有一组链接及其对应的div显示点击时的信息。

我想要做的是使用jQuery，当点击链接时，应该只显示该特定链接的div，其余部分应该隐藏。现在，它显示所有div容器，无论点击哪个链接，除非我再次点击同一链接[然后切换其div]。

这是我现在的jQuery代码：

              $("#babout")
               .click(function() {
                  $("div#about").slideToggle(600);
                }),

            $("#bcontact")
               .click(function() {
                  $("div#contact").slideToggle(600);
                }),



            $("#bsearch")
               .click(function() {
                  $("div#search").slideToggle(600);
                }),

。。。 HTML：

 <!-- Begin Search -->
        <div id="search" style="display:none;">
                <input type="text" class="bsearch" name="search" value="Type and press Enter" />
        </div>
         <!-- End Search -->

     <!-- Begin About -->
            <div id="about" style="display:none;">
                    This is about
            </div>
             <!-- End About -->

             <!-- Begin Contact -->
            <div id="contact" style="display:none;">
                    This is contact
            </div>
             <!-- End Contact -->

              <!-- Begin Naviagtion -->
             <div id="navigation">

                 <ul>
                    <li><a class="main" href="">Another?</a></li>
                    <li><a id="babout">About</a></li>
                    <li><a id="bcontact">Contact</a></li>
                    <li><a id="bsearch">Search</a></li>
                    <li><a href="">RSS Feed</a></li>
                 </ul>   

             </div>
             <!-- End Naviagtion -->

Answer 1

为每个可切换的<div>元素分配一个这样的类：

<div id="search" class="toggleDiv" style="display:none;">

然后你可以为每个链接编写一个处理程序而不是一个，如下所示：

$("#navigation li a[id]").click(function() {
  $("#" + this.id.substr(1)).slideToggle(600)
      .siblings('.toggleDiv').slideUp(600);
});

You can give it a try here，除此之外，这与手风琴you may want to give it a look的功能非常接近（但不完全相同）。

Answer 2

然后就这样做：

$("#babout").click(function() {
    $("div#contact:visible").slideUp();
    $("div#search:visible").slideUp();

    $("div#about").slideToggle(600);
});

使用jQuery切换div的div容器

2 个答案: