我有这么长的描述文字可以向用户显示。首先,它将显示此描述的一小部分。但是会有一个“更多>>”按钮,可以打开整个说明。我怎么能通过jQuery或CSS做到这一点。
<div class="desc">
<h3>Product Description</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel dui aliquam, semper mauris sit amet, imperdiet purus. Fusce convallis, nisl at imperdiet tincidunt, libero dui euismod tortor, eu ornare justo orci quis felis. Morbi volutpat felis nisl, vel interdum nulla porttitor a. Aenean est risus, malesuada a orci at, aliquam mattis ipsum. Proin porttitor metus dapibus nulla tempor scelerisque. Morbi fringilla imperdiet dui, at molestie justo rutrum mattis. Nunc in ultricies lorem. Quisque ut orci nec nibh facilisis imperdiet ac sit amet lacus. Sed tempus condimentum velit et porta. Etiam in lectus sapien. In hac habitasse platea dictumst. Integer tincidunt pulvinar lorem, vel placerat diam.</p>
</div>
编辑:
jsfiddle
这是我的直接想法。但是看起来不太好每次都向描述文本添加额外的跨度是不现实的。我希望有一些干净的解决方案。
最佳答案
可以为您完成此操作,但是您必须手动定义中断。如果要以编程方式执行此操作,则应使用一个对字符进行计数并将分隔符放置在特定位置的函数。
Updated fiddle
视图:
<div class="desc">
<h3>Product Description</h3>
<p>Text before the break...
<span class="more" style="display: none;">Text after the break...</span>
<a href="#" class="click-more">More>></a>
</p>
</div>
jQuery的:
$('.click-more').click(function () {
$(this).hide();
$('.more').show();
});
关于jquery - 单击更多按钮将打开长文本,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/24129284/