jQuery手风琴问题 - 悬停图标和IE7 / 8问题

时间：2015-07-14 11:25:47

标签： javascript jquery jquery-ui accordion jquery-ui-accordion

我正在尝试在我的网站上使用Jquery手风琴，我想解决几个问题。

首先，当用户用鼠标悬停时，我似乎无法将光标作为手。

其次，手风琴在IE8或IE7中不起作用，但在IE9及以上版本和其他浏览器中都能正常工作。

我绝不是构建代码的专家，而且我已经将几乎所有东西放在一起 - 我只需要将这两个问题排序，然后我就完成了。

我的测试页面的链接是：

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  &nbsp;&nbsp;&nbsp;  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>

1 个答案:

答案 0 :(得分：0)

首先，您的代码中有一个拼写错误：

错： 

<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>

鼠标悬停上的手形光标：

如果您希望手/指针光标显示添加此样式：

<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上被打破，这是最好的开发人员可以做到的。

希望能回答你的问题。如果您有任何疑虑，请在评论中告诉我们。

相关问题
最新问题