0

これを使用して、非表示のリストアイテムを展開しています。アンカーリンク(.edit_this)を介してそれらを展開します。1つのリストアイテムのみを展開/表示しながら、他のリストアイテムを非表示にするにはどうすればよいですか?

$(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>

</ p>

4

1 に答える 1

0

$('.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);
    });
});

デモ

于 2012-10-29T23:26:02.040 に答える