0

私は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
}
4

1 に答える 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 に答える