하이퍼 링크로 위치 지정 문제가 발생했습니다

간단한 텍스트가 포함 된 div이 있습니다. 나는 그 텍스트의 단지 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

코드로 들어가서 내 잘못을 knoe하자. –

그냥 당신이 얻을 수있는 백만 가지 방법 중 하나로 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> 태그를 넣어합니다. 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

이제 작동 중입니다. 하지만이 작은 변화가 필요합니다. 더 많은 링크가 세 번째 줄의 끝에 나타나야합니다. 즉, 텍스트가 자르며 거기에 연결되어야 함을 의미합니다. –

하이퍼 링크로 위치 지정 문제가 발생했습니다

답변

관련 문제