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

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› D3.js

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

This topic created in 3347 days ago, the information mentioned may be changed or developed.

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

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

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

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

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

7 replies • 2017-05-24 11:15:38 +08:00

uzumaki

Apr 7, 2017 via Android

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

ys0290

Apr 7, 2017 via iPhone

display:none

tadtung

Apr 7, 2017

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

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

AlwaysBee

Apr 7, 2017

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

islujw

Apr 7, 2017

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

islujw

Apr 7, 2017

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

lvwzhen

May 24, 2017

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