jQuery 手风琴问题 - 悬停图标和 IE7/8 问题
jQuery accordion issues - Hover icon and IE7/8 problems
我正在尝试在我的网站中使用 Jquery 手风琴，我有几个问题需要解决。
首先，当用户将鼠标悬停在上方时，我似乎无法将光标变成一只手。
其次，手风琴在 IE8 或 IE7 中不工作，但在 IE9 及更高版本和其他浏览器中工作正常。
我绝不是构建代码的专家，我已经将一些几乎存在的东西放在一起 - 我只需要解决这两个问题，然后我就完成了。
我的测试页的 link 是：
http://www.micklehamweather.com/test.php
我的代码是：
<!DOCTYPE html>
<!-- DC RSS Feeds CSS -->
<link type="text/css" rel="stylesheet" href="tsc_rssfeed.css" />
<!-- jQuery Library (skip this step if already called on page ) -->
<script type="text/javascript" src="jquery.min.js"></script> <!-- (do not call twice) -->
<!-- DC RSS Feeds JS -->
<script type="text/javascript" src="tsc_rssfeed.js"></script>
<script type="text/javascript" src="tsc_vticker.js"></script>
<script>
$(function($) {
var allAccordions = $('.accordion div.data');
var allAccordionItems = $('.accordion .accordion-item');
$('.accordion > .accordion-item').click(function() {
if($(this).hasClass('open'))
{
$(this).removeClass('open');
$(this).next().slideUp("slow");
}
else
{
allAccordions.slideUp("slow");
allAccordionItems.removeClass('open');
$(this).addClass('open');
$(this).next().slideDown("slow");
return false;
}
});
})
;
</script>
<!-- Start BOM Alert Refresh -->
<!-- JQuery script -->
<script type="text/javascript">
var updatebomalertvic = setInterval(function() {
$('#bomalertvic').fadeOut('fast').load('rss-directbomvic.php').fadeIn('fast');}, 63000);
</script>
<script type="text/javascript">
var updatebomalertvic = setInterval(function() {
$('#firealertvic').fadeOut('fast').load('fireincidents.php').fadeIn('fast');}, 63000);
</script>
<div align="center">
<div class="accordion">
<div class="accordion-item"><table width="100%" border="1" cellspacing="1" cellpadding="1">
<tr><td style="text-align:center" class="table-top" colspan="4"<span style="font-size: 100%; text-align:center;"> Alerts <img width="20" height="20" style="vertical-align: middle;" alt="Warnings issued by the Bureau of Meteorology" src="images/alert-icon-120.png" border="0"> Warnings Fire <img width="20" height="20" style="vertical-align: middle;" alt="Incidents issued by the CFA" src="images/Emergency_Warning.png" border="0"> Incidents
</span></td>
</tr></table><div class="type">
</div> </div>
<tr class="column-dark">
<td colspan="8" align="center">
<div class="data" style="display: none;">
<!-- Start BOM Alert TAS -->
<script type="text/javascript">
function SetHTML1(type) {
document.getElementById("a0").style.display = "none"
document.getElementById("a1").style.display = "none"
document.getElementById("b1").style.display = "none"
document.getElementById("c1").style.display = "none"
document.getElementById("d1").style.display = "none"
document.getElementById("e1").style.display = "none"
document.getElementById("f1").style.display = "none"
document.getElementById("g1").style.display = "none"
// Using style.display="block" instead of style.display="" leaves a carriage return
document.getElementById(type).style.display = ""
}
</script>
<table width="100%" cellspacing="1" cellpadding="1">
<table style="background-color:#9F9F9F; border: thin solid; border-color: #4A4A4A; " width="100%">
<tr>
<td width="91.428571428571428571428571428571" align="center"><img src="images/vic-thumb.png" width="30" height="30" title="Show Victoria - Warnings" alt="VIC"/><a href="http://www.bom.gov.au/vic/warnings/index.shtml" target="_blank" title="Show Victoria - Warnings">VIC</a></td>
<td width="91.428571428571428571428571428571" align="center"><img src="images/tas-thumb.png" width="30" height="30" title="Show Tasmania - Warnings" alt="TAS"/><a href="http://www.bom.gov.au/tas/warnings/index.shtml" target="_blank" title="Show Tasmania - Warnings">TAS</a></td>
<td width="91.428571428571428571428571428571" align="center"><img src="images/wa-thumb.png" width="30" height="30" title="Show Western Australia - Warnings" alt="WA"/><a href="http://www.bom.gov.au/wa/warnings/index.shtml" target="_blank" title="Show Western Australia - Warnings">WA</a></td>
<td width="91.428571428571428571428571428571" align="center"><img src="images/nt-thumb.png" width="30" height="30" title="Show Northern Territory - Warnings" alt="NT"/><a href="http://www.bom.gov.au/nt/warnings/index.shtml" target="_blank" title="Show Northern Territory - Warnings">NT</a></td>
<td width="91.428571428571428571428571428571" align="center"><img src="images/sa-thumb.png" width="30" height="30" title="Show South Australia - Warnings" alt="SA"/><a href="http://www.bom.gov.au/sa/warnings/index.shtml" target="_blank" title="Show South Australia - Warnings">SA</a></td>
<td width="91.428571428571428571428571428571" align="center"><img src="images/act-thumb.png" width="30" height="30" title="Show Australian Capital Territory - Warnings" alt="ACT"/><a href="http://www.bom.gov.au/act/warnings/index.shtml" target="_blank" title="Show Australian Capital Territory - Warnings">ACT</a></td>
<td width="91.428571428571428571428571428571" align="center"><img src="images/nsw-thumb.png" width="30" height="30" title="Show New South Wales - Warnings" alt="NSW"/><a href="http://www.bom.gov.au/nsw/warnings/index.shtml" target="_blank" title="Show New South Wales - Warnings">NSW</a></td>
<td width="91.428571428571428571428571428571" align="center"><img src="images/qld-thumb.png" width="30" height="30" title="Show Queensland - Warnings" alt="QLD"/><a href="http://www.bom.gov.au/qld/warnings/index.shtml" target="_blank" title="Show Queensland - Warnings">QLD</a></td>
</tr>
</table>
</td>
</tr>
<tr class="column-light">
<!-- Start Hide All -->
<td colspan="8"><span id="a0" style=""></span>
<!-- End Hide All -->
<!-- Start BOM Alert VIC -->
<span id="e1" style="display:value">
<table style="background-color:#FFE991; border: thin solid; border-color: #4A4A4A; " width="100%">
<tr align="left" class="forecasttext">
<td><div id="bomalertvic"><?php include("rss-directbomvic.php");?></div><br/></td>
</div>
</tr>
</table>
</span>
<!-- End BOM Alert VIC -->
<!-- Fire -->
<span id="e1" style="display:value">
<table style="background-color:#FFE991; border: thin solid; border-color: #4A4A4A; " width="100%">
<tr align="left" class="forecasttext">
<td><div id="firealertvic"><?php include("fireincidents.php");?></div><br/></td>
</div>
</tr>
</table>
</span>
<!-- Fire -->
</td>
</tr>
</table>
</div>
首先，您的代码有错别字：
错误：
<td style="text-align:center" class="table-top" colspan="4"<span style="font-size: 100%; text-align:center;">
正确：
<td style="text-align:center" class="table-top" colspan="4"><span style="font-size: 100%; text-align:center;">...</span>
鼠标悬停时的手形光标：
如果你想要 hand/pointer 光标显示添加这个样式：
<td style="text-align:center; cursor: pointer;" class="table-top" colspan="4"><span style="font-size: 100%; text-align:center;">...</span>
浏览器兼容性：
至于IE，真的很难让一切正常工作。 IE 9 有很好的支持，但旧版本需要做更多的工作才能获得最大的兼容性。但是 jQuery 和 jQuery UI 应该涵盖了大部分内容。正如@atmd 所提到的，您应该检查 jQuery 和 jQuery UI 版本。但最终，IE 上的某些功能将被破坏，这是最好的开发人员可以做到的。
希望这能回答您的问题。如果您还有任何疑虑，请在评论中告诉我。
我正在尝试在我的网站中使用 Jquery 手风琴，我有几个问题需要解决。
首先，当用户将鼠标悬停在上方时，我似乎无法将光标变成一只手。
其次，手风琴在 IE8 或 IE7 中不工作，但在 IE9 及更高版本和其他浏览器中工作正常。
我绝不是构建代码的专家，我已经将一些几乎存在的东西放在一起 - 我只需要解决这两个问题，然后我就完成了。
我的测试页的 link 是：
http://www.micklehamweather.com/test.php
我的代码是：
<!DOCTYPE html>
<!-- DC RSS Feeds CSS -->
<link type="text/css" rel="stylesheet" href="tsc_rssfeed.css" />
<!-- jQuery Library (skip this step if already called on page ) -->
<script type="text/javascript" src="jquery.min.js"></script> <!-- (do not call twice) -->
<!-- DC RSS Feeds JS -->
<script type="text/javascript" src="tsc_rssfeed.js"></script>
<script type="text/javascript" src="tsc_vticker.js"></script>
<script>
$(function($) {
var allAccordions = $('.accordion div.data');
var allAccordionItems = $('.accordion .accordion-item');
$('.accordion > .accordion-item').click(function() {
if($(this).hasClass('open'))
{
$(this).removeClass('open');
$(this).next().slideUp("slow");
}
else
{
allAccordions.slideUp("slow");
allAccordionItems.removeClass('open');
$(this).addClass('open');
$(this).next().slideDown("slow");
return false;
}
});
})
;
</script>
<!-- Start BOM Alert Refresh -->
<!-- JQuery script -->
<script type="text/javascript">
var updatebomalertvic = setInterval(function() {
$('#bomalertvic').fadeOut('fast').load('rss-directbomvic.php').fadeIn('fast');}, 63000);
</script>
<script type="text/javascript">
var updatebomalertvic = setInterval(function() {
$('#firealertvic').fadeOut('fast').load('fireincidents.php').fadeIn('fast');}, 63000);
</script>
<div align="center">
<div class="accordion">
<div class="accordion-item"><table width="100%" border="1" cellspacing="1" cellpadding="1">
<tr><td style="text-align:center" class="table-top" colspan="4"<span style="font-size: 100%; text-align:center;"> Alerts <img width="20" height="20" style="vertical-align: middle;" alt="Warnings issued by the Bureau of Meteorology" src="images/alert-icon-120.png" border="0"> Warnings Fire <img width="20" height="20" style="vertical-align: middle;" alt="Incidents issued by the CFA" src="images/Emergency_Warning.png" border="0"> Incidents
</span></td>
</tr></table><div class="type">
</div> </div>
<tr class="column-dark">
<td colspan="8" align="center">
<div class="data" style="display: none;">
<!-- Start BOM Alert TAS -->
<script type="text/javascript">
function SetHTML1(type) {
document.getElementById("a0").style.display = "none"
document.getElementById("a1").style.display = "none"
document.getElementById("b1").style.display = "none"
document.getElementById("c1").style.display = "none"
document.getElementById("d1").style.display = "none"
document.getElementById("e1").style.display = "none"
document.getElementById("f1").style.display = "none"
document.getElementById("g1").style.display = "none"
// Using style.display="block" instead of style.display="" leaves a carriage return
document.getElementById(type).style.display = ""
}
</script>
<table width="100%" cellspacing="1" cellpadding="1">
<table style="background-color:#9F9F9F; border: thin solid; border-color: #4A4A4A; " width="100%">
<tr>
<td width="91.428571428571428571428571428571" align="center"><img src="images/vic-thumb.png" width="30" height="30" title="Show Victoria - Warnings" alt="VIC"/><a href="http://www.bom.gov.au/vic/warnings/index.shtml" target="_blank" title="Show Victoria - Warnings">VIC</a></td>
<td width="91.428571428571428571428571428571" align="center"><img src="images/tas-thumb.png" width="30" height="30" title="Show Tasmania - Warnings" alt="TAS"/><a href="http://www.bom.gov.au/tas/warnings/index.shtml" target="_blank" title="Show Tasmania - Warnings">TAS</a></td>
<td width="91.428571428571428571428571428571" align="center"><img src="images/wa-thumb.png" width="30" height="30" title="Show Western Australia - Warnings" alt="WA"/><a href="http://www.bom.gov.au/wa/warnings/index.shtml" target="_blank" title="Show Western Australia - Warnings">WA</a></td>
<td width="91.428571428571428571428571428571" align="center"><img src="images/nt-thumb.png" width="30" height="30" title="Show Northern Territory - Warnings" alt="NT"/><a href="http://www.bom.gov.au/nt/warnings/index.shtml" target="_blank" title="Show Northern Territory - Warnings">NT</a></td>
<td width="91.428571428571428571428571428571" align="center"><img src="images/sa-thumb.png" width="30" height="30" title="Show South Australia - Warnings" alt="SA"/><a href="http://www.bom.gov.au/sa/warnings/index.shtml" target="_blank" title="Show South Australia - Warnings">SA</a></td>
<td width="91.428571428571428571428571428571" align="center"><img src="images/act-thumb.png" width="30" height="30" title="Show Australian Capital Territory - Warnings" alt="ACT"/><a href="http://www.bom.gov.au/act/warnings/index.shtml" target="_blank" title="Show Australian Capital Territory - Warnings">ACT</a></td>
<td width="91.428571428571428571428571428571" align="center"><img src="images/nsw-thumb.png" width="30" height="30" title="Show New South Wales - Warnings" alt="NSW"/><a href="http://www.bom.gov.au/nsw/warnings/index.shtml" target="_blank" title="Show New South Wales - Warnings">NSW</a></td>
<td width="91.428571428571428571428571428571" align="center"><img src="images/qld-thumb.png" width="30" height="30" title="Show Queensland - Warnings" alt="QLD"/><a href="http://www.bom.gov.au/qld/warnings/index.shtml" target="_blank" title="Show Queensland - Warnings">QLD</a></td>
</tr>
</table>
</td>
</tr>
<tr class="column-light">
<!-- Start Hide All -->
<td colspan="8"><span id="a0" style=""></span>
<!-- End Hide All -->
<!-- Start BOM Alert VIC -->
<span id="e1" style="display:value">
<table style="background-color:#FFE991; border: thin solid; border-color: #4A4A4A; " width="100%">
<tr align="left" class="forecasttext">
<td><div id="bomalertvic"><?php include("rss-directbomvic.php");?></div><br/></td>
</div>
</tr>
</table>
</span>
<!-- End BOM Alert VIC -->
<!-- Fire -->
<span id="e1" style="display:value">
<table style="background-color:#FFE991; border: thin solid; border-color: #4A4A4A; " width="100%">
<tr align="left" class="forecasttext">
<td><div id="firealertvic"><?php include("fireincidents.php");?></div><br/></td>
</div>
</tr>
</table>
</span>
<!-- Fire -->
</td>
</tr>
</table>
</div>
首先，您的代码有错别字：
错误：
<td style="text-align:center" class="table-top" colspan="4"<span style="font-size: 100%; text-align:center;">
正确：
<td style="text-align:center" class="table-top" colspan="4"><span style="font-size: 100%; text-align:center;">...</span>
鼠标悬停时的手形光标：
如果你想要 hand/pointer 光标显示添加这个样式：
<td style="text-align:center; cursor: pointer;" class="table-top" colspan="4"><span style="font-size: 100%; text-align:center;">...</span>
浏览器兼容性：
至于IE，真的很难让一切正常工作。 IE 9 有很好的支持，但旧版本需要做更多的工作才能获得最大的兼容性。但是 jQuery 和 jQuery UI 应该涵盖了大部分内容。正如@atmd 所提到的，您应该检查 jQuery 和 jQuery UI 版本。但最终，IE 上的某些功能将被破坏，这是最好的开发人员可以做到的。
希望这能回答您的问题。如果您还有任何疑虑，请在评论中告诉我。