HTML - 如何制作“阅读更多”按钮

2023-12-04

在我的网站上,我有我的博客,我希望每张卡片都有一个“阅读更多”按钮。我特别希望它只显示x折叠时显示单词(非字符),然后展开时显示整个文本。我不想有一个按钮可以转到另一个具有完整内容的页面,因为我正在使用自己构建的 CMS,它会自动从表单添加帖子。

我尝试过 readmore.js 但这似乎根本不起作用。它什么也不做。我也尝试过 jQuery.dotdotdot,它似乎也不起作用

这是一件很奇怪的事情,我一直想不通。我见过的其他 SO 问答都没有提供帮助。


<p><a onclick="javascript:ShowHide('HiddenDiv')">read more</a></p>
<div class="mid" id="HiddenDiv" style="display: none;"><font face="Arial" size="+2" 

color="#306Eff" align="right">put the rest of the text here
</div>
<script type="text/javascript">// <![CDATA[
function ShowHide(divId)
{
if(document.getElementById(divId).style.display == 'none')
{
document.getElementById(divId).style.display='block';
}
else
{
document.getElementById(divId).style.display = 'none';
}
}
// ]]></script>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

HTML - 如何制作“阅读更多”按钮 的相关文章

  • jQuery Blur() 在 Chrome 上不起作用

    我在 MacOSX 上运行这个http jsfiddle net q84wv http jsfiddle net q84wv on Chrome最新版本 它不会工作 在 Firefox 上运行时它工作得很好 有什么线索吗 假设您想要aler
  • vagrant box速度慢,如何改进?

    我们已经为我们的开发盒构建了一个 vagrant box 但我们面临着一些延迟问题 Issues Assetic 手表速度很慢 app dev php 中的整体应用程序访问速度很慢 在 vagrant box 的共享文件夹中使用 查找 命令
  • 引入 V8 后,Google Apps 脚本无法为其他用户完全执行

    我编写了一个脚本 得到了这里好心人的大力帮助 该脚本使用 Google Sheets 脚本复制 Google Drive 上的文件夹 和内容 它运行了很长一段时间 但后来我启用了 V8 引擎 现在已禁用 问题是 它仍然适用于我 也许还有其他
  • 带 CSS 网格的等宽侧边栏列

    是否可以让左右列具有相同的宽度 而中间列占据剩余空间 我不想设置像这样的百分比grid template columns 20 60 20 因为并不总是确定这些列的内容是什么 Flexbox 和表格似乎没有解决这个问题的方法 所以我再次尝试
  • 专用网络:web3.eth.getAccounts() 始终发送空数组

    我正在运行一个私人以太坊网络 我确实用https aws amazon com blockchain templates 整个设置已经完成 AWS 上的设置看起来正确 现在 我正在尝试创建帐户并检索所有这些帐户 为此 我使用以下方法 Web
  • 空 URL 哈希导致页面在 js 事件上跳转

    我有一个带有下一个和上一个按钮的照片库 如果我的某个 javascript 方法由于某种原因被破坏 那么当单击其中一个按钮时 它会向 url 添加一个哈希值 即 www google com 我知道可以给散列一个 div id 来跳转到页面
  • 对文本变量进行数学求和? (例如 5865/100 )

    我有一个变量是 whatever 5865 100 这是一个文本变量 我希望它计算 5865 100 以便我可以将其添加到其他数字并进行计算 Number format 不起作用 因为它只返回 5 865 而我希望它返回 58 65 我可以
  • 将 NPM 包客户端与 nuxt 结合使用

    我对 nuxt 和 javascript 非常陌生 我正在尝试弄清楚如何在客户端使用我的应用程序的依赖项 我将它们列在我的 nuxt config js 中并使用 npm 安装 我也有一个文件 plugins导入它们的目录 不确定这是否好
  • 使用 JavaScript 的计时器

    我想使用java脚本实现计时器 我想随着间隔的变化而减少计时器 Example假设我的计时器从 500 开始 我想要根据级别减少计时器 例如1 一级定时器应减1 且递减速度应较慢 2 2级定时器应递减2 递减速度应为中等3 3级定时器应减3
  • Excel 类似 HTML 表格,可在 x 轴(完整表格)和 y 轴(标题固定)上滚动

    我想建立一个具有固定宽度列的表格 在大多数情况下 表数据会水平和垂直溢出 如果列的宽度大于视图宽度 则需要水平滚动条来滚动并查看所有表列 同时滚动标题和数据 如果数据的高度大于可用视图 则会出现垂直滚动框 但在滚动时保持标题固定 以便用户关
  • 为什么我需要 $(document.body) 来使用 Mootools Element 方法扩展 document.body?

    因此 在尝试让我的应用程序在最新的 IE 上运行后 结果发现 IE 不喜欢以下代码 document body getElement className Firefox 和 Chrome 响应良好 但是document bodyIE 上没有
  • 在声明组件选择器时添加指令 - Angular 7

    我正在学习 Angular 并通过单击按钮动态创建组件 我正在尝试使用 Angular Material 的拖放功能来拖动这些创建的组件以对它们进行排序 我的基本组件 html 中有以下代码 div style margin 20px di
  • Laravel 5 Socialite - cURL 错误 77:设置证书验证位置时出错

    我正在 Laravel 5 中使用社交名流来设置 facebook 登录 我仔细按照说明进行操作 直到出现以下错误 cURL error 60 SSL certificate problem unable to get local issu
  • 使用 React React-router 登录后重定向到主页,并且 usenavigate 不起作用?

    我希望用户在成功登录后重定向到主页 我将用户登录的 api 请求的数据存储在一个名为 currentUser 的变量中 因此如果 currentUser 为 true 它应该重定向到主页 这就是我处理登录请求的方式 export const
  • 如何在 JavaScript 中获取浮点数的小数位?

    我想要的是与 Number prototype toPrecision 几乎相反的 这意味着当我有数字时 它有多少位小数 例如 12 3456 getDecimals 4 对于任何想知道如何更快地完成此操作 无需转换为字符串 的人 这里有一
  • FullCalendar 检查选择日是否有活动?

    我正在使用 Full Calendar js 插件 到目前为止一切顺利 但我想检查开始和结束之间的选择是否有事件 我只需要返回 true 或 false 基本上 如果日期选择中已经存在事件 我想阻止用户创建事件 var calendar c
  • 如何调试 Silex 框架中的 php 致命错误

    我想知道如何看到这样的语法错误 缺少分号 这将导致 WSOD 白屏死机 我尝试包含一个调试配置文件 如下所示 use Symfony Component Debug ErrorHandler use Symfony Component De
  • Serviceworker Bug event.respondWith

    我的 serviceworker 的逻辑是 当发生获取事件时 它首先获取包含一些布尔值 而不是 event request url 的端点 并根据我正在调用的值检查该值event respondWith 对于当前的获取事件 我正在提供来自缓
  • jQuery 覆盖默认验证错误消息显示(Css)弹出/工具提示等

    我试图用 div 而不是标签来覆盖默认的错误消息标签 我看过这个帖子 https stackoverflow com questions 309574 jquery validation how to not display errors
  • 使用 Lodash 将对象键转换为具有键值数量的数组[重复]

    这个问题在这里已经有答案了 我有一个产品对象 products bread 1 milk 2 cheese 2 chicken 1 我想要一个包含产品名称的数组 如下所示 products bread milk milk cheese ch

随机推荐

  • TypeError:对象不是 Node.js 函数

    我正在 Lynda com 上进行 Node js 基本培训 跟随视频但我在终端中收到此错误 类型错误 对象不是函数 节点模块 飞行 index js var count 0 destinations var Flight function
  • MapKit 的点击手势

    目前我有一张地图 其中有几个Annotations For the Annotations I have func mapView mapView MKMapView didSelect view MKAnnotationView Do y
  • 解密销售合作伙伴 API 报告

    我正在尝试解密销售合作伙伴 api 报告 但在解密时我在 decipher final 附近收到此错误 Node Error error 0606506D digital envelope routines EVP DecryptFinal
  • Android 自定义字体 - 适用于 Actionbar、Toast、Dialogs 等系统组件

    我正在开发翻译成不支持的语言的应用程序 设备上缺少字体 因此 我向应用程序添加了字体 并更改了所有 TextView EditText 按钮的字体 我还可以更改 WebView 中的字体 但现在我需要更改所有系统组件的字体 操作栏 标题下拉
  • java 如何让定时器返回时间

    一旦我开始运行计时器 如何让它返回已经过去了多长时间 这个定时器可以设置可见吗 作为第二个参数传递给 Timer 构造函数的对象实现了 ActionListener 通过该接口 它会在计时器发出的每个警报时接收对其 actionPerfor
  • 使用 Python“请求”模块进行代理

    只是一个关于优秀的简短而简单的介绍RequestsPython 的模块 我似乎无法在文档中找到变量 代理 应包含的内容 当我向它发送一个带有标准 IP PORT 值的字典时 它拒绝了它要求的 2 个值 所以 我猜 因为这似乎没有在文档中涵盖
  • gprof 的时间采样问题

    我正在尝试使用 gprof 分析一些用 g 编译的 C 代码 包括选项 pg 然而 尽管该程序在我的计算机上运行需要 10 15 分钟 CPU 已满 但 gprof 生成的表中的 time cumulative Seconds 和 self
  • JQuery - 替换悬停时的图像

    我有一个图像文件夹 在这个文件夹中 我有两种类型的几张图像 一png和一个gif 显示的图像是png版本 在图像悬停时 我需要将其替换为它的gif版本 当悬停消失时 将png版本回到原位 我目前有以下有效的方法 image containe
  • 使用 Apps 脚本在 Gmail 中嵌入 Google 表单

    我正在尝试使用 Apps 脚本在电子邮件中嵌入预填写的表单 这些电子邮件只会发送给 Gmail 用户 我想要的功能与手动通过电子邮件发送表单时按 在电子邮件中包含表单 选项相同 我已经成功创建了prefilledUrl并使用UrlFetch
  • 将字符串格式转换为日期时间(mm/dd/yyyy)

    我必须将 mm dd yyyy 格式的字符串转换为日期时间变量 但它应保留 mm dd yyyy 格式 string strDate DateTime Now ToString MM dd yyyy 请帮忙 您正在寻找DateTime Pa
  • 递归clearInterval不起作用

    我在 javaScript 中有以下函数 当我检测到需要重新加载样式表时调用此函数 例如 用户语言发生变化 因此文本将不再适合按钮 问题是 它卡在了 setInterval 部分 无限地循环进入其中 我可以在 chrome 调试器中看到它确
  • 如何将镜头效果应用到我的 UIImage 上?

    我如何将镜头效果应用到我的 UIImage 上 如下所示http processing org learning topics lens html 您可以使用Cocos2D框架来做到这一点 如果您选择使用它 可以通过以下方法轻松应用镜头效果
  • to_sql 不适用于 update_attributes 或 .save

    我正在寻找一种方法来存储在更新或创建操作中生成的 sql 字符串 我尝试过附加 to sql到最后update attributes但它返回一个TrueClass错误 或类似的东西 我有什么遗漏的吗 简而言之 您需要重写 ActiveRec
  • 在 SwiftUI 中处理派生状态

    假设我正在创建一个 日期编辑器 视图 目标是 采用默认的种子日期 它允许用户更改输入 如果用户随后选择 他们可以按 保存 在这种情况下 视图的所有者可以决定对数据执行某些操作 这是实现它的一种方法 struct AlarmEditor Vi
  • SQL 中的查询设计实践

    我正在 MS Access 2007 中构建数据库查询 我想知道我当前的设计实践是否达到标准 基本上 数据库在我来之前就已经配置好了 但我被赋予了构建有效查询来提取数据的责任 我当前的查询小而简单 每个查询一次完成 2 3 个任务 有时仅
  • Google OAuth2 - isAccessTokenExpired() 始终为 true

    我在应用程序中使用 OAuth 并且希望在访问令牌过期时注销用户 但是当我检查令牌过期时 client gt isAccessTokenExpired 它总是返回 1 if isset GET logout unset SESSION to
  • 是否可以导出 Google Apps 脚本执行记录

    我编写了一个 Web 应用程序脚本 该脚本被部署为在用户访问 Web 应用程序的上下文中运行 是否可以以编程方式导出 Web Apps 脚本执行脚本 不直接 您不会获得完整的堆栈跟踪 但您可以仔细记录您想要通知的所有内容 在脚本的末尾 您可
  • Excel VBA 将关闭的工作簿作为值复制并粘贴到活动工作簿,Mac OS X

    我知道这是一种常见的查询类型 但在主动搜索后 我尚未找到针对我的特定实例的答案 我也是一个VBA新用户 所以请耐心等待 我想要将包含实时公式 范围 A1 HW6000 的整个数据表 HISTORY XLSM 中的 AllDATA 选项卡 从
  • 如何使用 Watir 访问 Shadow DOM 并与之交互?

    我需要访问此页面 chrome downloads 并检查文件是否已下载 但它是 Shadow DOM 我发现这篇文章如何使用 Selenium Webdriver 访问 DOM 元素 http jeremysklarsky github
  • HTML - 如何制作“阅读更多”按钮

    在我的网站上 我有我的博客 我希望每张卡片都有一个 阅读更多 按钮 我特别希望它只显示x折叠时显示单词 非字符 然后展开时显示整个文本 我不想有一个按钮可以转到另一个具有完整内容的页面 因为我正在使用自己构建的 CMS 它会自动从表单添加帖