如何在 WordPress 页面上实现点击一个标题展开／关闭其下文字？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

已注册用户请登录

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› D3.js

推荐书目

› JavaScript 权威指南第 5 版

这是一个创建于 2569 天前的主题，其中的信息可能已经有所发展或是发生改变。

举个例子， Apple 站点页面底部的「常见问题解答」： http://www.apple.com/cn/shop/buy-iphone/special-edition-iphone-7

点击后展开，出现许多小问题，每个小问题点击展开。

需要的效果：像每个小问题那样的展开动效。但 + 号和 x 号需要像最大的「常见问题解答」那样的样式和旋转动画。

应用在 WordPress 文章页面（内容太多了，希望能收起）。

搜索了一些资料，并模仿了 Apple.com 的 CSS ，但有许多小问题，例如 + 号不能恒久显示在正确的位置、+ 号无法旋转 45 度等。

7 条回复 • 2017-05-24 11:15:38 +08:00

uzumaki

2017-04-07 04:23:54 +08:00 via Android

wp 的模板很多都能实现，我记得这效果有短代码的

ys0290

2017-04-07 08:50:24 +08:00 via iPhone

display:none

tadtung

2017-04-07 10:11:38 +08:00

这东西不是最简单的折叠面板或者折叠菜单吗？说的这么复杂。。。
你自己模仿，，那么相关 js 有加载？

bootcss 就有现成的 http://v3.bootcss.com/javascript/#collapse 自己根据替换修改为你想要的动态效果就行。

AlwaysBee

2017-04-07 10:31:04 +08:00

搜索终极简码这个插件，应该是你想要的

islujw

2017-04-07 13:04:45 +08:00

@tadtung 感谢，要调整一些样式还是蛮不简单的，有很多差别。另外， CSS 的 transition 貌似比 jQuery 顺滑很多……

islujw

2017-04-07 23:44:19 +08:00

@AlwaysBee 感谢，不过这些样式都挺奇怪的，其实最重要的还是样式。

lvwzhen

2017-05-24 11:15:38 +08:00

就是 transform: rotate(45deg) scale(1); 呀，没什么特别的代码，不过是 js 添加 class 切换的，所以能固定，不是 hover 触发。