1

我有一段滑动面板效果很好，但我的问题是，一旦你打开一个然后点击第二个或第三个面板，前一个面板不会关闭并保持打开状态，看起来很乱，我有一个指向我的代码的链接jsfiddle。所以我想知道是否可以添加一些代码，当单击新面板时可以自动关闭以前打开的面板？

当前的 jQuery 代码如下所示：

    $("#team_section .team_member_photo").next().hide().append('<input type="button" value="close" />');

    $("#team_section .team_member_photo").click(function() {
        $(this).next().slideToggle("slow");
    });

    $("input").click(function() {
        $(this).parent().slideUp();
    });

HTML：

  <div id="team_wrapper">
  <div id="team_section" class="clearfix">

            <div class="team_member_photo">photo 0</div>
            <div class="team_member_profile_text"><p>text</p></div>

            <div class="team_member_photo">photo 1</div>
            <div class="team_member_profile_text"><p>text</p></div>

            <div class="team_member_photo">photo 2</div>
            <div class="team_member_profile_text"><p>text</p></div>

            <div class="team_member_photo">photo 3</div>
            <div class="team_member_profile_text"><p>text</p></div>

            <div class="team_member_photo">photo 4</div>
            <div class="team_member_profile_text"><p>text</p></div>

            <div class="team_member_photo">photo 5</div>
            <div class="team_member_profile_text"><p>text</p></div>

  </div><!-- team_section -->
  </div><!-- team_wrapper -->

CSS：

                                  #team_wrapper {
                       width: 990px;
                        height: 600px;
                    }

                    #team_section {
                        width: 100%;
                        background-color: #fee9f2;
                        height: 100%;
                        position: relative;
                        visibility: visible;
                    }

                    .team_member_photo {
                        background-color: #d3d9fe;
                        width: 150px;
                        height: 170px;
                        display: inline-block;
                        padding: 0 10px 10px 0;
                    }

                    .team_member_profile_text {
                        background-color: #fff;
                        height: 100%;
                        overflow: hidden;
                        position: relative;
                        float: left;
                    }
4

1 回答 1

0

不，你需要告诉 jquery 关闭所有其他的。

只需将您的点击侦听器更改为：

$("#team_section .team_member_photo").click(function() {
    var $this = $(this);
    $this.parent().find('.team_member_profile_text').slideUp("fast");
    $this.next().slideDown("slow");
});
于 2013-02-01T11:28:58.563 回答