0

我是 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>&#160;
</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>
4

0 回答 0