Question

使用jQueryUI的baic redmond主题，我的手风琴师坐不正确。我认为样式表中的某些内容会导致问题，但我删除了它，它仍然很时髦。我把它剥离了，回到这里，它仍然在2 x行上包裹三角形图标和文字。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Nodes</title>
<link rel="stylesheet" type="text/css" href="/DFCx/css/jQueryUI_redmond/jquery-ui-1.8.16.custom.css" />
<script type="text/javascript" src="/DFCx/js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="/DFCx/js/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="/DFCx/js/page/Nodes/view.js"></script>
</head>
<body>
  <div id="accordion" class="accordion">
        <h3>Title</h3>
        <div>junk</div>
        <h3>Title</h3>
        <div>junk</div>
        <h3>Title</h3>
        <div>junk</div>
        <h3>Title</h3>
        <div>junk</div>
    </div>
</body>
</html>

手风琴脚本（view.js）只有：

$( "#accordion" ).accordion({ 
    autoHeight: false, 
    collapsible: true, 
    header: 'h3' 
});

手风琴完美地工作，打开，关闭，适合等等，它只是在它放置图标时包裹h3！

请参阅http://i.imgur.com/1fwD2.png以获取结果的屏幕截图示例

当我在手风琴配置中使用“icons：false”时，它会关闭图标并按预期工作，但我希望将它们放在那里！尝试了不同的UI样式表（阴转等）以及不同颜色的所有相同问题。

有什么我想念的吗？

- 更新（不确定它是不是解决方案）在jQueryUI css文件中有这一行：

.ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; }

我编辑的

是

.ui-icon { display: block; float: left; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; }

（注意添加了float：left;）

这已经修复了标题中的图标定位，并且有效。手指越过它对其他图标没有任何讨厌的流动影响:(

Answer 1

您的标题也应包含在<a>标记中：

<h3><a href="#">Title</a></h3>

Answer 2

我有同样的问题，我用它来纠正它：

/* correct accordion headers*/
.ui-accordion-header span{ position: absolute; }
.ui-accordion-header a { margin-left: 20px; }

Answer 3

您正在使用的生成的CSS可能不包含手风琴的样式。

尝试使用其他CSS，例如：http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/base/jquery-ui.css。

或者，从此页面中选择您正在使用的主题：http://blog.jqueryui.com/2010/09/jquery-ui-1-8-5/。

您仍然需要确保为手风琴标题as documented设置样式（并由Larry建议）：

<div id="accordion">
    <h3><a href="#">First header</a></h3>
    <div>First content</div>
    <h3><a href="#">Second header</a></h3>
    <div>Second content</div>
</div>

Answer 4

对我来说有用的是@ton和@LarryLustig的综合解决方案。

您的图书应该包含在<a>
中
<h3><a href="#">Title</a></h3>
页面样式

.ui-accordion-header span{ position: absolute; } .ui-accordion-header a { margin-left: 20px; }

使用图标时，jQueryUI accordion会导致换行

4 个答案: