jQuery: 显示超过一行的<p>的内容

Question

我有3段，如下HTML所示。我希望p-show的内容正常不要超过第一行。当点击每个 p-show 的 "Show me" 按钮时，它应该展开并显示其中的所有内容。

我尝试了以下 JavaScript 但它似乎不起作用：

var h = $('p-show')[0].scrollHeight;


$('.p-show a').click(function(e) {
    e.stopPropagation();
    $('.p-show').animate({
        'height': h
    })
});

$(document).click(function() {
    $('.p-show').animate({
        'height': '50px'
    })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="p-show p-show1">
Content Content Content <br />
Content Content Content <br />
Content Content Content <br />
Content COntent Content
<a href="#" class="show-me show-me1">Show Me</a>
</p>

<p class="p-show p-show2">
Content Content Content <br />
Content Content Content <br />
Content Content Content <br />
Content COntent Content
<a href="#" class="show-me show-me2">Show Me</a>
</p>

<p class="p-show p-show3">
Content Content Content <br />
Content Content Content <br />
Content Content Content <br />
Content COntent Content
<a href="#" class="show-me show-me3">Show Me</a>
</p>

Answer 1

怎么样

$(document).on('click', '.p-show + a', function(event) {
    event.preventDefault();
    $(this).prev('p').toggleClass('expanded');
});

.p-show {
   height:1em; overflow: hidden;
}
.p-show.expanded {
   height: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="p-show p-show1">
Content Content Content <br />
Content Content Content <br />
Content Content Content <br />
Content COntent Content

</p>
<a href="#" class="show-me show-me1">Show Me</a>

<p class="p-show p-show2">
Content Content Content <br />
Content Content Content <br />
Content Content Content <br />
Content COntent Content

</p>
<a href="#" class="show-me show-me2">Show Me</a>

Answer 2

也许您可以将可以隐藏和显示的内容包裹在一个分配有 class 的元素中，以便可以使用 jQuery

访问它

示例：

HTML

<p class="p-show p-show1">
Content Content Content <br />
   <span class="more">
   Content Content Content <br />
   Content Content Content <br />
   Content COntent Content
   </span>
<a href="#" class="show-me show-me1">Show Me</a>
</p>

CSS

.more{
   display:none;
}

jQuery

$(".show-me").click(function(){
   $(this).prev(".more").slideToggle();
});

jQuery: 显示超过一行的<p>的内容

jQuery: Show content of the <p> beyond one line

html

javascript

css

jquery