點擊功能打開和關閉

Question

我正在嘗試在http://teamgeek.co.za/#who上編寫類似這樣的代碼

我已經在gif和div上使用了代碼，這些代碼將在所選每張圖片的底部顯示說明。 問題是，如果我單擊第二行，則第一行中打開的描述不會自動關閉。

這是我使用的腳本。

<script>
        $("#items a").click(function() {
        var id = $(this).attr("id");
        $("#pages div#" + id + "").toggle("slow").siblings().hide("slow");
    });
</script>
<script>
        $("#items2 a").click(function() {
        var id = $(this).attr("id");
        $("#pages2 div#" + id + "").toggle("slow").siblings().hide("slow");
    });
</script>    

這是我使用的完整代碼，我正在使用上面的javascript獲取功能：

<!-- Team Grid  --><section class="main">
    <div id="items">
        <div class="item">
            <a id="1" class="work">
                <img class="media" src="img/tryimages/greggy.png"/>
                <div class="content">
                <img class="media" src="img/tryimages/greggy.gif"/>
                <!--<h2 class="title">Click</h2>!-->
                </div>
            </a>
        </div>

        <div class="item">
            <a id="2" class="work page-scroll">
                <img class="media" src="img/tryimages/dennise.png"/>
                <div class="content">
                <img class="media" src="img/tryimages/dennise.gif"/>
                </div>
            </a>
        </div>

        <div class="item">
            <a id="3" class="work page-scroll">
                <img class="media" src="img/tryimages/jm.png"/>
                <div class="content">
                <img class="media" src="img/tryimages/jm.gif"/>
                </div>
            </a>
        </div>

        <div class="item">
            <a id="4" class="work page-scroll">
                <img class="media" src="img/tryimages/hannah.png"/>
                <div class="content">
                <img class="media" src="img/tryimages/hannah.gif"/>
                </div>
            </a>
        </div>
    </div>
</section><!-- End of Works Grid  -->
        <div id="pages">
            <div id="1" class="mydivhide">
            <h1>Greggy Rick Go</h1><h4>/Chief Executive Officer</h4>
            </div>
            <div id="2" class="mydivhide">
            <h1>Dennise Recuerdo</h1><h4>/Secretary</h4>
            </div>
            <div id="3" class="mydivhide">
            <h1>Jude Marlon Alegro</h1><h4>/Head Web Developer</h4>
            </div>
            <div id="4" class="mydivhide">
            <h1>Hannah Lois Aliposa</h1><h4>/Head Content Writer</h4>
            </div>
        </div>


        <!-- Team Grid  --><section class="main">
    <div id="items2">
        <div class="item">
            <a id="5" class="work page-scroll">
                <img class="media" src="img/tryimages/rd.png"/>
                <div class="content">
                <img class="media" src="img/tryimages/rd.gif"/>
                </div>
            </a>
        </div>

        <div class="item">
            <a id="6" class="work page-scroll">
                <img class="media" src="img/tryimages/soc.png"/>
                <div class="content">
                <img class="media" src="img/tryimages/soc.gif"/>
                </div>
            </a>
        </div>

        <div class="item">
            <a id="7" class="work page-scroll">
                <img class="media" src="img/tryimages/anj.png"/>
                <div class="content">
                <img class="media" src="img/tryimages/anj.gif"/>
                </div>
            </a>
        </div>

        <div class="item">
            <a id="8" class="work page-scroll">
                <img class="media" src="img/tryimages/ian.png"/>
                <div class="content">
                <img class="media" src="img/tryimages/ian.gif"/>
                </div>
            </a>
        </div>
      </div>
    </section><!-- End of Works Grid  -->
    <div id="pages2">
            <div id="5" class="mydivhide">
            <h1>Ruth Danielle Aliposa</h1><h4>/Head Web Designer</h4>
            </div>
            <div id="6" class="mydivhide">
            <h1>Christopher Emmanuel Socong</h1><h4>/Web Developer</h4>
            </div>
            <div id="7" class="mydivhide">
            <h1>Angineth Bantiles</h1><h4>/Web Content Writer</h4>
            </div>
            <div id="8" class="mydivhide">
            <h1>Ian Kevin Mendova</h1><h4>/Web Developer</h4>
            </div>
        </div>
 </div>
</section>

Answer 1

下面針對您的問題切換代碼的​​優化

您已將每行的類設置為.row-data，並在下面編寫腳本。

<script>
    $(".row-data a").click(function() {
    $(".row-data").hide("slow");
    $(this).parent().show("slow");
  });
</script>

注意：刪除腳本...

Answer 2

如果要使用此代碼，則應使用以下代碼：

<script>
    $("#items a").click(function() {
      var id = $(this).attr("id");
      $("#pages div, #pages2 div").siblings().hide("slow");
      $("#pages div#" + id + "").toggle("slow");
    });
</script>

我不確定我是否正確理解了該代碼段，因為我不了解您的其余代碼:-)但是，這不是解決您的問題的好方法。 就像已經提到的注釋一樣，最好使用類來處理它。 這是一個可以輕松解決您的問題的jsfiddle ： JSFiddle

但是，您可能只更改了效果，但這是次要的事情。