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

但是你可能只会改变效果，但这只是一个小问题。

单击打开和关闭的功能

2 个答案: