顯示/隱藏列表項 - 一次只有一個

Question

我正在使用它擴展隱藏列表項。我通過錨鏈接（.edit_this）擴展它們。如何隱藏其他列表項目，同時展開/只顯示一個列表項目？

$(document).ready(function(){ 
$('.show_hide').slideUp(0); 
$('.edit_this').click(function(){ 
var takeID = $(this).attr('id'); 
$('#'+takeID+'C').slideDown(300); 
});$('.close').click(function(){ 
var takeID = $(this).attr('id').replace('Close',''); 
$('#'+takeID+'C').slideUp(300); 
}); 
}); 

-

<li><a href="javascript:void(0);" class="edit_button edit_this" id="1">Edit</a></li> 
<li class="show_hide" id="1C"> 
<p>lkjlkjasdfasdf</p> 
<a href="javascript:void(0);" id="1Close" class="close cancel_btn">Close</a> 
</li> 

<li><a href="javascript:void(0);" class="edit_button edit_this" id="2">Edit</a></li> 
<li class="show_hide" id="2C"> 
<p>lkjlkjasdfasdf</p> 
<a href="javascript:void(0);" id="2Close" class="close cancel_btn">Close</a> 
</li> 

<li><a href="javascript:void(0);" class="edit_button edit_this" id="3">Edit</a></li> 
<li class="show_hide" id="3C"> 
<p>lkjlkjasdfasdf</p> 
<a href="javascript:void(0);" id="3Close" class="close cancel_btn">Close</a> 
</li> 

Answer 1

只需添加一個簡單的$('.show_hide').slideUp(300);到點擊事件應該這樣做：

$(document).ready(function() { 
    $('.show_hide').slideUp(0); 
    $('.edit_this').click(function() { 
     $('.show_hide').slideUp(300); // this line 
     var takeID = $(this).attr('id'); 
     $('#' + takeID + 'C').slideDown(300); 
    }); 
    $('.close').click(function() { 
     var takeID = $(this).attr('id').replace('Close', ''); 
     $('#' + takeID + 'C').slideUp(300); 
    }); 
}); 

DEMO