Question

此问题与How do you show just the first line of text of a div and expand on click?类似。 @thirtydot提供的答案是http://jsfiddle.net/JUtcX/4/。我的问题是如何在行展开时将+符号更改为 - 符号，并在行折叠时更改 - 符号转换为+符号。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

您可以通过多种方式实现这一目标。这是一个：

.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>

for(int k=0;k<arr.length;k++)
{ 
   System.out.println(arr[k]);
}

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

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

2 个答案: