javascript - jQuery:显示 超出一行的内容

Question

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

我尝试了下面的 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>