1

我在摆弄jQuery 手风琴

我复制粘贴了默认手风琴的最小代码并将其粘贴到本地html文件中，在本地下载了jquery-1.8.3.js、jquery-ui.js和jquery-ui.css。我还包括了collapsed.png 和expanded.png 图像（在图像文件夹中）并将它们全部放在适当的文件夹中并正确链接它们。一切都很好，只是箭头图像根本没有出现。

手风琴Demo.html

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Accordion - Default functionality</title>
  <link rel="stylesheet" href="styles/jquery-ui.css" />  
  <script src="scripts/jquery-1.8.3.js"></script>
  <script src="scripts/jquery-ui.js"></script>
  <script>
  $(function() {
        //-------------------notice---------------------------------------//
    var icons = {
              header: "ui-icon-circle-arrow-e",
              activeHeader: "ui-icon-circle-arrow-s"
            };
        //----------------------------------------------------------------//
    $( "#accordion" ).accordion({
        icons: icons  //<<<<---------------------------notice---------//
    });
  });
  </script>
      //-------------------notice---------------------------------------//
  <style type="text/css">
    .ui-icon-circle-arrow-e
    {
        background-image: url("images/collapsed.png");
    }
    .ui-icon-circle-arrow-s
    {
        background-image: url("images/expanded.png");
    }
  </style>
      //----------------------------------------------------------------//    
</head>
<style>
    #accordion
    {
        width:650px;
    }
</style>
<body>

<div id="accordion">
  <h3>Section 1</h3>
  <div>
    <p>
    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.
    </p>
  </div>    
  <h3>Section 4</h3>
  <div>
    <p>
    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.
    </p>
    <p>
    Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
    Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
    inceptos himenaeos.
    </p>
  </div>
</div>   
</body>
</html>

输出是这样的：

在此处输入图像描述

[编辑：添加文件夹层次结构快照]我的文件夹层次结构看起来像这样，我的代码在 tempaccr.html 中：

在此处输入图像描述

如您所见，我已经正确设置了所有链接和样式，并且还定义了 CSS 类以在该部分折叠和展开时切换箭头，为什么没有出现箭头？任何原因。

4

1 回答 1

0

我认为你应该试试这个：

<style type="text/css">
.ui-icon-circle-arrow-e
{
    background-image: url("../images/collapsed.png");
}
.ui-icon-circle-arrow-s
{
    background-image: url("../images/expanded.png");
}
</style>
于 2013-02-01T05:14:31.297 回答