非常にうまく機能するスライドパネルのセクションがありますが、私の問題は、1つを開いてから2番目または3番目のパネルをクリックすると、前のパネルが閉じずに開いたままになり、非常に乱雑に見えることです。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;
}