在表格行中显示第一行，然后在单击时展开或折叠并将 + 符号更改为 - 符号

Question

这个问题类似于如何只显示div的第一行文本并在单击时展开？. @thirtydot提供的答案是 http://jsfiddle.net/JUtcX/4/。 我的问题是如何在行扩展时将 + 符号更改为 - 符号，并在行折叠时将 - 符号更改为 + 符号。

$('.expand').each(function(){
var reducedHeight = $(this).height();
$(this).css('height', 'auto');
var fullHeight = $(this).height();
$(this).height(reducedHeight);

$(this).data('reducedHeight', reducedHeight);
$(this).data('fullHeight', fullHeight);
}).click(function() {
$(this).animate({height: $(this).height() == $(this).data('reducedHeight') ? $(this).data('fullHeight') : $(this).data('reducedHeight')}, 500);
});

.expand {
border: 1px solid red;
height: 1em;
padding: 2px;
overflow: hidden    
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content" class="expand">
<a>[+]</a> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut euismod, nulla a aliquet ultrices, mauris turpis fermentum quam, vel varius dolor enim vitae lacus. Morbi ac posuere orci. Aliquam erat volutpat. Pellentesque consequat dignissim metus in accumsan. Maecenas sem augue, placerat commodo convallis non, commodo vel elit. Vestibulum porttitor tortor molestie ligula varius sed cursus arcu suscipit. Maecenas imperdiet laoreet suscipit. Donec blandit est eget augue hendrerit venenatis. Nunc nibh ipsum, convallis mattis iaculis at, luctus ac risus. Morbi commodo sollicitudin ipsum, quis aliquam quam vestibulum at.
</div>

Answer 1

你可以用很多方式做到这一点。这是其一：

$('.expand').each(function(){
var reducedHeight = $(this).height();
$(this).css('height', 'auto');
var fullHeight = $(this).height();
$(this).height(reducedHeight);

$(this).data('reducedHeight', reducedHeight);
$(this).data('fullHeight', fullHeight);
}).click(function() {
$(this).animate({height: $(this).height() == $(this).data('reducedHeight') ? $(this).data('fullHeight') : $(this).data('reducedHeight')}, 500);
$(this).find('.expand_sign, .collapse_sign').toggleClass('hidden');
});

.expand {
border: 1px solid red;
height: 1em;
padding: 2px;
overflow: hidden    
}
.hidden {
display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content" class="expand">
<a class="expand_sign">[+]</a><a class="collapse_sign hidden">[-]</a> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut euismod, nulla a aliquet ultrices, mauris turpis fermentum quam, vel varius dolor enim vitae lacus. Morbi ac posuere orci. Aliquam erat volutpat. Pellentesque consequat dignissim metus in accumsan. Maecenas sem augue, placerat commodo convallis non, commodo vel elit. Vestibulum porttitor tortor molestie ligula varius sed cursus arcu suscipit. Maecenas imperdiet laoreet suscipit. Donec blandit est eget augue hendrerit venenatis. Nunc nibh ipsum, convallis mattis iaculis at, luctus ac risus. Morbi commodo sollicitudin ipsum, quis aliquam quam vestibulum at.
</div>

Answer 2

如前所述，有很多不同的方法可以做到这一点。

你可以使用 CSS：

.expand {
border: 1px solid red;
height: 1em;
padding: 2px;
overflow: hidden    
}
.expand a {
width: 25px;
text-align: center;
display: inline-block;
}
.expand a:after {
content: '[+]';
}
.expand a.open:after {
content: '[-]';  
}
.hidden {
display: none;
}

然后只需添加/删除类：

$('.expand').each(function(){
var reducedHeight = $(this).height();
$(this).css('height', 'auto');
var fullHeight = $(this).height();
$(this).height(reducedHeight);
$(this).data('reducedHeight', reducedHeight);
$(this).data('fullHeight', fullHeight);
}).click(function() {
// Get the <a>, check if it has the open class
// if it does, remove it, if it doesn't, add it
var $sign = $(this).find('a');
if($sign.hasClass('open')){
$sign.removeClass('open');
}else{
$sign.addClass('open');
}
$(this).animate({height: $(this).height() == $(this).data('reducedHeight') ? $(this).data('fullHeight') : $(this).data('reducedHeight')}, 500);
});

有了这个答案，你会删除HTML中的硬编码[+]。

这是一个工作示例。