0

我有一个div包含简单的文本。我应该只显示 3 行带有showMore链接的文本。单击 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
}
4

1 回答 1

1

实现这一目标的百万种方法中的一种：小提琴

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 内并将其绝对定位。小提琴

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;}
于 2013-01-22T06:24:59.980 回答