2011-04-12 183 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(); 
} 
相關問題