jQuery：显示超出一行的<p>的内容

Question

我有3个段落，如下面的HTML所示。我希望p-show的内容通常不超过第一行。当＆＃34;显示我＆＃34;单击每个p-show的按钮，它应该展开并显示其中的所有内容。

我尝试了下面的JavaScript，但它似乎不起作用：

＆＃13;

＆＃13;

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'
    })
})

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

怎么样

＆＃13;

＆＃13;

<script src="https://raw.githubusercontent.com/eligrey/FileSaver.js/master/FileSaver.js"></script>

aaa
<button id="b" onclick="save_file()">export to CSV</button>
bbb

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

也许你可以隐藏和显示包含在分配了类的元素中的内容，以便可以使用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();
});