jQuery的切换不能在Chrome中工作，但在IE和Firefox中工作

Question

嗨，大家好，我有一个页面，其中我在一个跨度中显示文本，并且单击一个按钮即可切换跨度控件，基本上，我为此使用了jQuery。 它在IE和firefox上工作正常，但在chrome上，当我单击关闭按钮（在范围内可以切换它）时，它第一次不起作用，但在第一次单击后起作用。

请咨询，代码如下

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

Answer 1

检查此线程jQuery .toggle（）无法与IE中的TR一起使用

Answer 2

我也有这个非常烦人的问题。 我认为这与我们HTML中的怪异有关，因为同一页面上的其他位置都可以正常工作。

我能够解决此问题的唯一方法是：

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

jQuery的切换不能在Chrome中工作，但在IE和Firefox中工作

问题描述

2 个解决方案

解决方案1
2 已采纳 2011-04-12 09:15:23

解决方案2
2 2012-03-06 17:20:00

jQuery的切换不能在Chrome中工作，但在IE和Firefox中工作

问题描述

2 个解决方案

解决方案1 2 已采纳 2011-04-12 09:15:23

解决方案2 2 2012-03-06 17:20:00

解决方案1
2 已采纳 2011-04-12 09:15:23

解决方案2
2 2012-03-06 17:20:00