私は Jquery UI と CSS が初めてで、非常に単純なアコーディオンを作ろうとしています。したがって、アコーディオンは正常に動作しますが、アイコンがまったく表示されず、アイコンが表示されない理由がわかりません。グラフィックがURLにあることを確認したので、そこにグラフィックが存在することを知っています。問題なく他のサイトのグラフィックを使用できます。Jquery UI をページに追加し始めたときに問題が発生しました。投稿したコードを .../filename.ext に変更して、私が働いている会社や私が働いているサイトの会社情報を公開しないようにしました。誰かが提供できる提案や助けをいただければ幸いです。
HTML/JS
<meta charset="utf-8">
<title>jQuery UI Accordion - Collapse content</title>
<link rel="stylesheet" href=".../jquery.ui.all.css">
<script src=".../jquery-1.9.1.js"></script>
<script src=".../jquery-ui.js"></script>
<script src=".../jquery.ui.core.js"></script>
<script src=".../jquery.ui.widget.js"></script>
<script src=".../jquery.ui.accordion.js"></script>
<script src=".../jquery.ui.button.js"></script>
<link rel="stylesheet" href=".../demos.css">
<link rel="stylesheet" href=".../icon.css">
<script>
$(function() {
$( "#accordion" ).accordion({
collapsible: true, active: false, icons: { header: "iconPlus", activeHeader: "iconMinus" }
});
var active = $( "#accordion" ).accordion( "option", "active" );
$( "#accordion" ).accordion( "option", "active", false );
$( "#accordion" ).accordion( "option", "icons", { header: "iconPlus", activeHeader: "iconMinus" });
});
</script>
</head>
<body>
<div id="accordion" style="background-color:#D0E1FF;color:#CC0000;">
<h3 style="background-color:#5555FF;color:#00CC00;"><a href="#">Map Tools</a></h3>
<div style="text-align: center">
<a href="http://maps.google.com/" target="_blank"><img src=".../GoogleMaps2.jpg" border="0" alt="" style="text-align: center; border-bottom: 0px; border-left: 0px; padding- bottom: 0px; margin-top: 0px; padding-left: 0px; width: 100px; padding-right: 0px; margin-bottom: 0px; height: 75px; border-top: 0px; border-right: 0px; padding-top: 0px"/></a>
<a href="http://www.bing.com/maps" target="_blank"><img src=".../BingMaps.jpg" border="0" alt="" style="border-bottom: 0px; border-left: 0px; padding-bottom: 0px; padding-left: 0px; width: 100px; padding-right: 0px; height: 75px; font-size: 10pt; border-top: 0px; border-right: 0px; padding-top: 0px"/></a>
<a href=".../Map.aspx" target="_blank"><img src=".../Map.JPG" border="0" alt="" style="border-bottom: 0px; border-left: 0px; padding-bottom: 0px; padding-left: 0px; width: 100px; padding-right: 0px; height: 75px; font-size: 10pt; border-top: 0px; border-right: 0px; padding-top: 0px"/></a> 
</div>
<h3 style="background-color:#55FF55;color:#0000CC;">Reference Tools</h3>
<div>
<p>References...</p>
</div>
<h3 style="background-color:#FF5555;color:#0000CC;">Agent Tools</h3>
<div>
<p>Tools like vacation calendar, schedule viewer, etc...</p>
</div>
<h3 style="background-color:#FFFFFF;color:CC0000;">Organizational Tools</h3>
<div>
<p>ORG Charts, Account and Network managers, etc...</p>
</div>
</div>
</body>
</html>
CSS
<style type="text/css">
.iconPlus
{
background:url(.../BluePlus.png) !important;
background-size:20px !important;
width:20px;
height:20px;
}
.iconMinus
{
background:url(.../BlueMinus.png) !important;
background-size:20px !important;
width:20px;
height:20px;
}
</style>