js content 折叠

最新推荐文章于 2024-12-03 16:02:13 发布

最新推荐文章于 2024-12-03 16:02:13 发布 · 126 阅读

文章标签：

#C #C++ #C#

js 专栏收录该内容

62 篇文章

订阅专栏

本文介绍了一种通过JavaScript实现的博客内容显示与隐藏的交互效果。利用简单的HTML结构与CSS样式，配合JavaScript函数，实现了博客正文部分的展开与收起功能。此功能增强了用户体验，使长篇幅的文章更易于阅读。

.open{
background: url(../images/downArrow.gif);
}
.close{
background: url(../images/upArrow.gif);
}

.post_body { padding:5px 15px; }
.post_bodyclose{ padding:5px 15px;height:100px; overflow:hidden; }

                        <div class="post">
                            <h1>
                            <span style="float: right"><a onclick="openContentAndClose(this,'post<c:out value="${post.id}"/>')" class="open">    </a></span>
                                <c:out value="${post.title}"/>

                         </h1>
                         <div class="post_bodyclose" id="post<c:out value="${post.id}"/>">
                             <p>
                                 <c:out value="${post.content.value}" escapeXml="false"/>
                             </p>
                         </div>