Wordpress 和 Accordions，现在没有任何效果答案

【问题标题】：Wordpress and Accordions, nothing works nowWordpress 和 Accordions，现在没有任何效果
【发布时间】：2013-11-11 17:29:11
【问题描述】：

我很困惑。我不确定我可以做些什么来破坏 Accordion Shortcode 插件或我刚刚尝试的 CSS Accordion 代码中的手风琴功能。大多数情况下，我需要了解如何解决这些问题，因此我将任凭您摆布，以便帮助该网站恢复正常功能。

首先，带有 Accordion 简码的页面：http://londoncapital.biz/partners/global/

我一直在使用 Symple Shortcode 插件，直到我不得不重新安装该站点，然后该插件停止工作。我怀疑这与 WP3.7.1 升级有关，但我不能确定。所以我决定只找到另一个可以工作的插件，Accordion 插件工作并且看起来更适合该网站，所以我很高兴。在某些时候，在解决并修复重新安装后出现的一些奇怪问题（从恢复的备份中以某种方式生成的奇怪空间）以及 Better WP Security 插件在其保护方面过于热心时，我对手风琴简码插件。然后......它停止工作。因为我无法追踪我可能做了什么，所以我决定研究另一种手风琴并找到了一个 CSS 版本。认为这是完美的，可以摆脱任何插件不兼容的问题，但可惜这也失败了。它目前已折叠，不会展开。

CSS Accordion 页面：londoncapital。商务/测试家

我关注了这个网站：http://www.hongkiat.com/blog/css-content-accordion/ 并像这样引用了 CSS 文件：

@import url("../onyx/accordion.css");

我怀疑有一个简单的答案，但如果我能弄明白，那该死的。感谢您提前做出的任何努力！此文件与普通 style.css 位于同一目录中（确切地说，此模板为 style4.css）。

【问题讨论】：

您的部分缺少锚点实际定位的 ID。例如。 <a href="#about">About</a> 需要对应的<section id="#about">...</section> 才能工作
另外，请注意 :target 使用该技术 is not supported by IE6-9 的选择器，您可能需要考虑使用 HTML5 shim/shiv 来添加对 <section> 元素的支持，或者交换他们支持<div>
啊，我认为这很简单。猜猜这就是在处理与该站点有关的其他问题时，当您的大脑被严重殴打时会发生的情况。谢谢大家！
@Dre - 将“
”直接交换为“
”会这么简单吗？
要么将它们换成 <div class="section">，要么使用 HTML5 Shiv 来填充对它的支持

标签： javascript jquery html css wordpress

【解决方案1】：

缺少触发目标所需的部分 ID。尽管您已将 ID 添加到 Anchor 标记。演示：<section id="#about">...</section>http://jsfiddle.net/dhanith/7y7mY/

【讨论】：

虽然这是一个很好的观察结果，并且确实有助于确保编码正确，但它并没有解决问题。 :(

【解决方案2】：

根据我上面的评论：您已经通过添加 ID 解决了一个问题，但现在又出现了另一个问题。您已将 HTML 中的 sections 替换为 div，但尚未更改 CSS 以匹配。将.accordion section 的所有实例更改为.accordion div，如下所示：

.accordion section:target { ... }
.accordion section:target:hover { ... }
.accordion section:target h2 { ... }
.accordion section:target h2 a { ...}

到 .accordion div:target { ... } .accordion div:target:hover { ... } .accordion div:target h2 { ... } .accordion div:target h2 a { ...}

您还需要对.horizontal section 和.vertical section 执行相同的操作。请参阅this JSFiddle 以了解它的实际应用

【讨论】：

嗯，我用 'div' 替换了所有 'section' 实例，但这似乎什么也没做。我尝试了您在 JSFiddle 中使用的 css，并且效果很好。多么奇怪。我的大脑太累了，无法直接比较 atm，所以我就说声谢谢，看看我现在能不能让它在主要问题页面上工作。