2011-04-12 186 views
2

嗨,伙计 我有一个页面,我在跨度显示文本,并跨度控制单击按钮切换,基本上我使用jQuery这一点。它在IE和firefox上工作正常,但在Chrome上点击关闭按钮时(它在跨度中切换它),它不起作用,我第一次点击它,但在第一次点击后工作。jquery切换不工作在铬,但在IE和火狐工作

请指点,代码如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title></title> 
    <script type="text/javascript" src="Assets/JS/jquery.js"></script> 
    <script language="javascript"> 
     $.showmsg = function (msgEle, msgText, autoHide, isSuccess) { 
      var tblMsg; 
      var imgType; 
      if (isSuccess) { 
       imgType = "<img src='Assets/Images/icon_status_success_26x26.gif'/>" 
      } else { 
       imgType = "<img src='Assets/Images/icon_status_fail_26x26.gif'/>" 
      } 

      tblMsg = '<div id="container" style="width: 400px;"><b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b><div class="contain"><table width="100%" cellpadding="0" cellspacing="0" border="0" class=""><tr><td style="width:30px;" align="center" valign="middle">' + imgType + '</td><td>' + msgText + '</td><td style="width:30px;" align="center" valign="middle"><a href="javascript:void(0);" onclick="$(\'#' + msgEle + '\').toggle(50);"><img src="Assets/Images/hide-icon.gif" border="0" alt="Hide" title="Hide"/></a></td></tr></table></div><b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b></div>'; 
      $("#" + msgEle).html(tblMsg); 
      $("#" + msgEle).show(); 
      if (autoHide) { 
       setTimeout(function() { $('#' + msgEle).fadeOut('normal') }, 10000); 
      } 
     } 


     function Delete1() { 
      $.showmsg('spnMessage', "Deleted", false, true); 
     } 

    </script> 
    <style type="text/css"> 
     .rtop, .rbottom 
     { 
      display: block; 
     } 
     .rtop *, .rbottom * 
     { 
      display: block; 
      height: 1px; 
      overflow: hidden; 
     } 
     .r1 
     { 
      margin: 0 5px; 
      background: yellow; 
     } 
     .r2 
     { 
      margin: 0 3px; 
      background: yellow; 
     } 
     .r3 
     { 
      margin: 0 2px; 
      background: yellow; 
     } 
     .r4 
     { 
      margin: 0 1px; 
      height: 2px; 
      background: yellow; 
     } 
     .contain 
     { 
      background: yellow; 
      text-align: left; 
     } 
    </style> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <br /> 
    <br /> 
    <br /> 
    <table> 
     <tr> 
      <td> 
       <asp:Button ID="btnDelete" runat="server" Text="Delete" OnClientClick="Delete1(); return false;" /> 
      </td> 
      <td> 
       <span id="spnMessage" style="display: none;"></span> 
      </td> 
     </tr> 
    </table> 
    </form> 
</body> 
</html> 

回答

2

我有这个很烦人的问题也。我认为它与我们的HTML中的一个怪癖有关,因为同一页面上的其他地方工作得很好。

我能解决这个问题的唯一办法就是要做到:

if($(#'element_id').css('display') == 'none'){ 
    $(#'element_id').show(); 
}else{ 
    $(#'element_id').hide(); 
} 
相关问题