顯示錶格行的第一行，然後展開或摺疊並單擊並更改+符號至 - 符號

Question

此問題與How do you show just the first line of text of a div and expand on click?類似。 @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。

Here is a working example。