使用jQuery自動關閉多個滑動面板

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"); 
});