1

私はjQueryアコーディオンをいじっていました

デフォルトのアコーディオンの最小限のコードをコピーしてローカルの html ファイルに貼り付け、jquery-1.8.3.js、jquery-ui.js、jquery-ui.css をローカルにダウンロードしました。また、collapsed.png と expand.png の画像を (画像フォルダーに) 含め、すべてを適切なフォルダーに入れ、適切にリンクしました。矢印の画像がまったく表示されないだけで、すべてがうまく機能していました。

accordianDemo.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 に答える