Question

我有一段滑动面板工作得很好但我的问题是，一旦你打开一个然后点击第二个或第三个面板上一个面板不关闭并保持打开看起来非常凌乱，我有一个链接到我的代码在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;
                    }

Answer 1

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

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

$("#team_section .team_member_photo").click(function() {
    var $this = $(this);
    $this.parent().find('.team_member_profile_text').slideUp("fast");
    $this.next().slideDown("slow");
});

使用jQuery在多个滑动面板上自动关闭

1 个答案: