定位問題與超鏈接

我有一個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 
}

來源

2013-01-22 madhu latha

你可以發佈您的代碼你已經高達 – Pratik

要編輯你的問題，並添加代碼那裏進行。 – matthewpavkov

請查看代碼並讓我知道我的錯 –

只是其中百萬的方式，你可以實現這一目標之一：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;}

jQuer Ÿ

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

來源

2013-01-22 06:24:59 PassKit

嗨，我已經嘗試過，但它顯示所有文本，然後顯示更多鏈接 –

@madhulatha點擊[小提琴]（http://jsfiddle.net/ YLFJF/2 /），看看右下角的窗格，你會看到它的工作原理。如果您指的是這種更改不適用於您自己的代碼，那麼如果沒有查看代碼，我們就無法判斷出現什麼問題。 – PassKit

現在它工作。但我需要在這個小小的變化。 th顯示更多鏈接應該出現在第三行的末尾。這意味着文本應截斷並鏈接應該來那裏 –

定位問題與超鏈接

回答

相關問題