jQueryUI手风琴使用图标时会导致打包

从jQueryUI使用baic redmond主题时，我的手风琴家并不坐正确。我认为我的样式表中出现了一些问题，但是我删除了它，它仍然很怪异。我剥去它的方式，回到这一点，它仍然在2 x线上包裹着三角形图标和文字。jQueryUI手风琴使用图标时会导致打包

<!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的结果

截图样品当我使用“图标：假”，在它的叶子掉了图标和按预期工作手风琴配置，但我想，让他们在那里！尝试了不同的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; }

（注意补充浮：left;）

这固定了图标在标题中的位置，并且可以作为一种享受。手指穿过它不具有任何讨厌的流上会影响其他图标:(

来源

2011-09-25 CrazyChris

这可能是生成的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（和拉里建议）：

<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>

来源

2011-09-26 23:04:24

你的标题应被包裹在一个<a>标签以及：

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

来源

2011-09-26 02:36:18

可悲的是，它并没有区别。 :( – CrazyChris

@CrazyChris，拉里建议修正你发布的问题：http://jsfiddle.net/william/urDcR/。如果这不能解决你的程序中的问题，你可能想检查你是否覆盖任何CSS对于图标。 –

@William - 我已经尝试过，没有标题中的链接，结果相同。另外，我加载的唯一css是我从jQueryUI下载的，因此我感到困惑。 – CrazyChris

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

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

来源

2013-12-26 11:27:51 ton

对我而言，合作的解决方案是@ton和@LarryLustig。

你的标题应被包裹在一个<a>

<h3><a href="#">Title</a></h3>
风格页

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

来源

2015-07-19 03:10:00 Lijo

jQueryUI手风琴使用图标时会导致打包

回答

相关问题