Làm thế nào để bạn chỉ hiển thị dòng văn bản đầu tiên của div và mở rộng khi nhấp chuột?

Question

Tôi muốn chỉ hiển thị dòng đầu tiên của một khối văn bản được gói và sau đó hiển thị toàn bộ khối khi nhấp. Ngoài ra, tôi muốn biết làm thế nào để chuyển đổi nó trở lại phiên bản một dòng nhỏ gọn trên một nhấp chuột thứ hai.

Có cách nào dễ dàng để thực hiện việc này thông qua css + javascript không? Tôi sử dụng jQuery.

Answer 1

Giả sử bạn không muốn sử dụng bất kỳ thư viện JavaScript nào (là lẻ).

Xem:http://jsfiddle.net/JUtcX/

HTML:

<div id="content"></div> 

CSS:

#content { 
    border: 1px solid red; 
    height: 1em; 
    padding: 2px; /* adjust to taste */ 
    overflow: hidden  
} 

JavaScript:

document.getElementById("content").onclick = function() { 
    this.style.height = 'auto'; 
} 

---

Ngoài ra, nếu bạn muốn sử dụng một khuôn khổ JavaScript như jQuery, bạn có thể làm động nó.

Xem:http://jsfiddle.net/JUtcX/2/

$('#content').click(function() { 
    var reducedHeight = $(this).height(); 
    $(this).css('height', 'auto'); 
    var fullHeight = $(this).height(); 
    $(this).height(reducedHeight); 

    $(this).animate({height: fullHeight}, 500); 
}); 

Answer 2

<div id='a' onclick='toggletext'>first line<br /></div> 

function toggletext(){ 
    var html= document.getElementById('a').innerHTML; 
    if(html=='first line<br />'){ 
     html = 'first line<br />next lines<br />next lines<br />'; 
    }else{ 
     html = 'first line<br />'; 
    } 
    document.getElementById('a').innerHTML = html 
} 

này có thể được tối ưu hóa và có thể được thực hiện để sử dụng một trong những libs chung

Answer 3

Bạn có thể làm điều này với một số jQuery.

<div id="a"> 
    <span id="first">This is the first line (read more)</span> 
    <br /> 
    <span id="rest">This is the rest of the text</span> 
</div> 

kịch bản

$('#rest').hide(); 

$('#first').click(function(){ 
    $('#rest').show();   
}); 

http://jsfiddle.net/jasongennaro/dC32A/

Answer 4

này được thực hiện dễ dàng sử dụng CSS + Javascript. Bạn chỉ cần thiết lập chiều cao của div đến chiều cao của một dòng, và ẩn tất cả tràn. Sau đó, khi người dùng nhấp vào div, hãy sử dụng trình xử lý hoạt ảnh đẹp để thực hiện một hiệu ứng mù hoặc tương tự khác để hiển thị toàn bộ nội dung của div.

Dưới đây là một ví dụ rất cơ bản (không động): http://jsfiddle.net/9Lw6T/

Answer 5

Trong CSS thiết lập kích thước của div kích thước của dòng (quan trọng: bạn có thể cần phải sử dụng dòng khoảng cách thuộc tính để có được đệm thích hợp trên dưới cùng với dòng thứ hai).

Tôi không biết cách nhấp, nhưng bạn có thể sử dụng :hover trong CSS để thay đổi kiểu (đặt lại khoảng cách dòng, đặt lại kích thước div và tràn thành giá trị thích hợp) để có hiệu ứng hiển thị di chuột.

Hoặc bạn có thể sử dụng JavaScript và thay đổi CSS đó khi nhấp (dễ làm với jQuery).

Answer 6

Gửi bài bình luận của tôi như là một câu trả lời:

cách tiếp cận khác có thể là định lớp height: 1em; overflow-y: hidden; và sau đó thêm/loại bỏ nó trên nhấp chuột với javascript.

Hoặc có thể bạn cũng có thể xử lý nó trong lớp :active -pseudo bằng cách gói <div> với <a> -agag, vì vậy không cần javascript. Nhưng sau đó div sẽ sụp đổ một lần nữa trên mất tập trung.

Answer 7

Đây sẽ là đủ:

Để ẩn tất cả ngoại trừ dòng đầu tiên:

var theDiv = document.getElementById('theDiv'); 
theDiv.style.overflowY = 'hidden'; 
theDiv.style.height = '1em'; 

Để hiển thị tất cả các văn bản:

var theDiv = document.getElementById('theDiv'); 
theDiv.style.overflowY = 'visible'; 
theDiv.style.height = 'auto'; 

Hoặc, nếu bạn đã sử dụng jQuery:

$('#theDiv').css({ height: '1em', overflowY: 'hidden' }); 

$('#theDiv').css({ height: 'auto', overflowY: 'visible' }); 

Answer 8

Thiết lập ẩn của div để 1em và sau đó exapnd nó onclick sự là giải pháp.

Kiểm tra điều này. Tôi đã không sử dụng bất kỳ thư viện JS nào.

CSS

.expandable{ 
    height:1.2em; 
    overflow:hidden; 
} 

HTML

<div class="expandable" onclick="expand(this)">Your text here</div> 

JS

window.expand = function(el) { 
    el.style.height = "auto"; 
} 

Đây là fiddle

http://jsfiddle.net/RwM8S/1/

Answer 9

$(document).on('click', '.collapsible', function() { 
 
    $(this).toggleClass('collapsed'); 
 
});

p { 
 
    cursor: pointer; 
 
} 
 

 
.collapsed { 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<p class="collapsible collapsed">I want to show just the first line of a block of wrapped text, and then reveal the whole block on click. Also, I'd like to know how to toggle it back to the compact one-line version on a second click. 
 
Is there an easy way to do this through css + javascript? I use jQuery.</p> 
 
<p class="collapsible">I want to show just the first line of a block of wrapped text, and then reveal the whole block on click. Also, I'd like to know how to toggle it back to the compact one-line version on a second click. 
 
Is there an easy way to do this through css + javascript? I use jQuery.</p> 
 
<p class="collapsible collapsed">I want to show just the first line of a block of wrapped text, and then reveal the whole block on click. Also, I'd like to know how to toggle it back to the compact one-line version on a second click. 
 
Is there an easy way to do this through css + javascript? I use jQuery.</p>