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

显示/隐藏列表项 - 一次只能显示一个

1 个答案: