Question

我有一个包含简单文字的div。我应该只用showMore链接显示该文本的3行。点击showMore链接我需要用showLess链接显示其中的所有文字。现在我使用overflow属性来实现这一目标。但有一个小问题，我应该在文本后立即显示"showMore"链接。那么如何在文本中定位超链接呢？

我的代码

 jQuery(document).ready(function () {
    jQuery('.showMore').click(function (event) {
        var contentDiv = jQuery('.contentDiv');
        contentDiv[0].style.height = 'auto';
        jQuery(event.target).hide();
        jQuery('.showLess').show();
    });
    jQuery('.showLess').click(function (event) {
        var contentDiv = jQuery('.contentDiv');
        var lineHeight = getLineHeight(contentDiv[0]);
        contentDiv[0].style.height = lineHeight * 3 + 'px';
        jQuery(event.target).hide();
        jQuery('.showMore').show();
    });
});


<!doctype html>
    <html>

    <body >
<div>
<div class = "contentDiv">
some content <br r1<br> r2<br> r3 <br> r4<br> r5
    </div>      
<a href = '#'  class = "showMore">Show More</a>
<a href = '#'  class = "showLess">Show Less</a>     
</div>
    </body>
    </html>


.contentDiv a {
    float : right;
 }
.contentDiv {
    overflow: hidden;
    height:3.6em;
    background:#ccc;
font-size : 12pt ;
    font-family :Courier;
 }
.showMore {
    float: right;
}
.showLess {
    position: relative;
    float: right;
    display : none;
margin-bottom : 5px
}

Answer 1

只有百万种方法中的一种：fiddle

HTML

<div id="text">Lots of text..</div>
<a href="#" id="showmore">Show More</a>
<a href="#" id="showless">Show Less</a>

CSS

#text {height:55px;overflow:hidden;}
#showless {display:none;}

的jQuery

$('#showmore').on('click', function(e){
    $('#text').css('overflow', 'visible').css('height', 'auto');
    $('#showless').show();
    $(this).hide();
    e.preventDefault();
});

$('#showless').on('click', function(e){
    $('#text').css('overflow', 'hidden').css('height', '55px');
    $('#showmore').show();
    $(this).hide();
    e.preventDefault();
});

要在右下方定位“显示更多”（根据您的后续评论中的要求），请将<a>标记放在div中并绝对定位。 Fiddle

HTML

<div id="text">Lots of text..
    <a href="#" id="showmore">Show More</a>
</div>
<a href="#" id="showless">Show Less</a>

CSS

#text {height:55px;overflow:hidden;position:relative;}
#showmore {position:absolute;bottom:0;right:0;background:#fff;padding-left:10px;}
#showless{display:none;}

定位问题与超链接

1 个答案: