0 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js" language="javascript"></script>
<script type="text/javascript" src="http://www.compactcourse.com/js/accordionNew.js" language="javascript"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />

<h1>Toggle Panels</h1>
<div id="notaccordion">
<h3><a href="#">Section 1</a></h3>
<div>

Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.

</div>
<h3><a href="#">Section 2</a></h3>
<div>

Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
suscipit faucibus urna.

</div>
<h3><a href="#">Section 3</a></h3>
<div>

Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
<ul>
    <li>List item one</li>
    <li>List item two</li>
    <li>List item three</li>
</ul>
</div>
<h3><a href="#">Section 4</a></h3>
<div>

Cras dictum. Pellentesque habitant morbi tristique senectus et netus
et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
mauris vel est.

Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos himenaeos.

</div>
</div>

以上是我在我的 wordpress 网站的一页上放入原始 html 代码框的代码。这是链接：compactcourse.com/sloths

如您所见，jquery 手风琴看起来不像它们应该看起来的正常格式。如果您将上面的代码粘贴到原始 html 编辑器中，预览将显示正常情况。关于为什么这会搞砸的任何想法？

4

2 回答 2

0

您网站的某些 CSS 可能会干扰jquery-uiCSS。也就是说，您网站主题使用的一些 CSS 规则更加具体，因此会覆盖从linkHTML 代码顶部的标签导入的一些 CSS 规则。

这也可以解释为什么这段代码在原始 HTML 编辑器中看起来很好（它不会加载额外的资源/样式表），但在您的网站上却没有。您需要从您的主题中找出干扰的 CSS，并相应地更改标记或 CSS。

以下是 CSS 特异性概念的一些指南/入门：

编辑：我看到的唯一明显的问题是手风琴标题底部的边距，h3正如丹尼尔在他的回答中指出的那样。导致此问题的主题 CSS 中的代码是这样的：

div.entry-content h3, div.entry-content h4, 
div.entry-content h5, div.entry-content h6 { 
    margin: 0 0 15px; 
}

要解决此问题，您需要覆盖h3手风琴内标签的边距。将此 CSS 规则添加到您的页面应该这样做：

#notaccordion h3 { 
    margin-bottom: 0; 
}

您可以将其放在<style></style>标签之间，也可以简单地将其添加到您的主题在该页面上加载的外部样式表之一。前者是一种相当草率的方法，但由于从标准的角度来看，您的页面代码已经是一个可怕的拼凑在一起的 codepasta 噩梦，它不会真的让事情变得更糟。

于 2013-08-12T20:01:06.680 回答
0

您主题中的 css 覆盖了 jquery ui 样式。标题都在底部添加了 15px 的边距。

将此添加到您的主题 CSS。div.entry-content .ui-accordion h3{margin-bottom:0;}

于 2013-08-12T20:07:10.127 回答