Question

<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编辑器中，预览将显示它应该如何正常。关于为什么会搞砸的任何想法？

Answer 1

您网站的某些CSS可能会干扰jquery-ui CSS。也就是说，您网站主题使用的某些CSS规则更具体，因此会覆盖从HTML代码顶部的link标记导入的某些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噩梦，它不会让事情变得更糟。

Answer 2

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

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

jquery手风琴格式不同

2 个答案: