html 单击readmore 无效,如何在html中创建只需要锚点的see-more/Read-more功能？

最新推荐文章于 2023-08-03 17:04:43 发布

花菌子

最新推荐文章于 2023-08-03 17:04:43 发布

阅读量1.4k

点赞数

文章标签： html 单击readmore 无效

本文介绍如何为不熟悉技术的用户创建一个基于jQuery的'查看更多'功能，使得网页内容能通过点击向上/向下滚动显示。通过添加锚点，实现多处内容的展开和收起，简化了代码维护。主要涉及HTML结构和jQuery事件监听。

摘要由CSDN通过智能技术生成

我正在做一个网站，由不那么科技精明的人来维护，我需要能够给他们添加使用jquery向上/向下滑动以显示其内容的“see-more”锚点的能力。如何在html中创建只需要锚点的see-more/Read-more功能？

我的代码适用于读取更多的单个实例，但是当存在多个此实例时，它会相当麻烦。

使用Javascript/jQuery的

$(".see-more").nextUntil(".see-less").wrapAll("

$(".see-less").hide();

var count= 1

$(".see-more-content").each(function(){

var count= count+1;

$(this).data("count",count);

console.log(count);

});

$(".see-more-content").slideUp(0);

$(".see-more").click(function(){

$(".see-more-content").slideToggle();

$(".see-more").hide();

$(".see-less").show();

});

$(".see-less").click(function(){

$(".see-more-content").slideToggle();

$(".see-less").hide();

$(".see-more").show();

});

HTML

关注