Click to Expand Text

Question

我有一个带有文本“Click Me”的div和一个带有限制视图文本选项的“P”标签。是否有一种使用jQuery点击“Click Me”并展开文本，再次点击隐藏文本的方法。很抱歉我不擅长jQuery。找不到方法使其正常工作。

请查看演示js Fiddle：http://jsfiddle.net/saifrahu28/7wKyj/

**HTML**
<div>Click me</div>

 <p>
  It is a long established fact that a reader
  will be distracted by the readable content of a 
  page when looking at its layout. The point of using Lorem Ipsum 
  is that it has a more-or-less normal distribution of letters, 
  as opposed to using 'Content here, content here',
  making it look like readable English. Many desktop publishing 
 <p>

CSS

p{
 overflow: hidden;
 text-overflow: ellipsis;
 display: block;
  white-space: nowrap;
  width:100px;
 }

如果可以的话，那将非常棒。

- S Raihan

---

请查看 slideUp() 和 slideDown() - http://api.jquery.com/slideUp/ 和 http://api.jquery.com/slideDown/。 - ntgCleaner

Answer 1

这可以使用toggleClass来实现（有许多选项可供选择）

$("element").toggleClass("className");

$(function(){
    $("#clickMe").click(function(){
        $("#para").toggleClass("myClass");
    })
});

p{
     text-overflow: ellipsis;
     display: block;
      white-space: nowrap;
      width:100px;
}

.myClass
{
     overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="clickMe">Click me</div>

<p id="para" class="myClass">
   It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing 
<p>

- reggaemahn

---

谢谢，这是一个很简单的展开/折叠文本的方法。 - Murtuza Ali Khan Mohammed