Question

尝试在我的页面中实现jquery手风琴，手风琴本身可以工作，但它没有显示箭头或加号/减号。我的代码如下：

<link rel="stylesheet" href="/css/jquery-ui-1.10.4.css" type="text/css" />
<script type="text/javascript"  src='/js/jquery-ui-1.10.4.min.js'></script>
<script type="text/javascript" src='/js/jquery-2.1.1.min.js'></script>


$(function() {
        var icons = {
            header : "ui-icon-circle-arrow-e",
            activeHeader : "ui-icon-circle-arrow-s"
        };
        $("#accordion").accordion();
        icons: icons;
});

<div id="accordion">
<h3>tab 1</h3>
 <div>tab 1 content </div>
<h3>tab 2</h3>
<div>tab 2 content </div>
</div>

我确实在网上找到了很多例子，但似乎没有什么能解决我的问题。任何帮助，将不胜感激。

Answer 1

按照下面的代码说明：

// 1st - initialize accordion 
$("#accordion").accordion();
// Then set accordion header options
$("#accordion").accordion("option", "icons", {
    'header': 'ui-icon-circle-arrow-e',
    'headerSelected': 'ui-icon-circle-arrow-s'
});

在这里演示：http://jsfiddle.net/csdtesting/4rp0mx0p/

Answer 2

我在向页面添加以下css链接后发现一切正常：

<link href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"
    rel="stylesheet" />

但是我不明白为什么我需要添加它，因为我已经从资源导入了一个ui css文件。

jquery手风琴不显示箭头或加/减

2 个答案: