jQuery折叠面板图标未显示

Question

我以前从未使用过jQuery中的图标功能，但我认为它们应该是链接的UI样式表的一部分。在它们出现之前，我需要下载图标包或其他东西吗？这是我的项目，一切都正常工作，只是没有图标。

在页眉中：

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

底部:

<script>
  jQuery(function() {
    var icons = {
      header: "ui-icon-circle-arrow-e",
      activeHeader: "ui-icon-circle-arrow-s"
    };
    jQuery( "#accordion" ).accordion({
      icons: icons,
      collapsible: true,
      active: false,
      heightStyle: "content"
    });
  });
</script>

以下是手风琴元素的实际HTML结构：

<div id="accordion">
  <h3>Header Text</h3>
  <div>
    <p>Words and stuff</p>
  </div>
  <h3>Oh hello, I'm the second header</h3>
  <div>
    <p>SO MANY WORDS!</p>
  </div>
</div>

谢谢。

- Longblog

---

是的，如果您托管CSS样式表，那么您也必须托管图像精灵。请注意，图像精灵需要与您从jQuery UI网站下载的ZIP文件中的位置相同（在文件系统上）相对于CSS样式表。 - Jasper

我并不是在托管它们，而是使用由jQuery.com提供的托管库和CSS。 - Longblog

Answer 1

看起来你需要包含一些CSS文件。

我已经用你的代码创建了一个fiddle，并包含了CSS文件，一切都正常工作。

http://jsfiddle.net/MaWsm/

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

- rorymorris

---

说实话，我不会使用这些图标。我只会使用FontAwesome。我已经在这里fork了fiddle：http://jsfiddle.net/PJAwQ/ - rorymorris

太好了，这正是我所需要的。谢谢你。 - Longblog

我忘记刷新页面了 :)) - Tasos

嘿，我刚刚在玩FontAwesome的功能，你实际上可以通过将类放在jQuery函数中使图标动态化。这里是fiddle fork链接：http://jsfiddle.net/e2h52/2/ 感谢这个伟大的资源！ - Longblog

根据您在Tasos的回答中提到的内容，您可以更改WordPress以使用自己的jQuery文件而不是内置的文件。我在构建每个网站之前都会使用以下代码放在wp_head();之前：wp_deregister_script( 'jquery' ); wp_register_script( 'jquery', '/assets/js/jquery.js'); wp_enqueue_script( 'jquery' ); - rorymorris