How to hide nested form from jQuery under IE8_问答_开发者

How to hide nested form from jQuery under IE8

开发者 https://www.devze.com 2022-12-28 08:21 出处：网络

An html segment with a div containing a form containing a table: <!DOCTYPE html> <html>

An html segment with a div containing a form containing a table:

<!DOCTYPE html>
<html> <!-- xmlns="http://www.w3.org/1999/xhtml" lang="en" -->
<head>
    <style type="text/css">
    #content{position:relative}
    table {border-color:#999;border-style:solid}
    </style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>

<body>
    <button onclick="javascript:$('.content-panel').toggle();">Toggle</button>
    <div id="content">
        <div class="content-panel">
            <form action='' method='post'>
                <select> 
                    <option>a </option>
                </select>

                <table>
                    <tr><td>ABCDEF</td></tr>
                </table>
            </form>
        </div>
    </div>
</body>
</html>

The toggle button should hide the form and its nested table, but does not do so under IE8. (version 8.0.60001) The form content gets hidden, but the table border continues to show, and retains its size. It is related to standards mode; it disappears in quirks-开发者_如何学Cmode.

Does anybody have a workaround for this?

This example page is reduced about as far as I can reduce it. If I remove the select or either of the divs, the problem disappears. The the select must be present, and the table needs to be nested in the form, as it will contain form elements.

The page itself is at: http://dev.rdbhost.com/rdbadmin/mainProbDemo.html

I posted this problem earlier with an overly simplified example, which was not reproducible. Thank you if you looked at it then.

http://api.jquery.com/detach/ might work for you if merely hiding doesn't work - it will remove the element from the dom, but save it so that you can reinsert it if you want to (using http://api.jquery.com/append/ or http://api.jquery.com/appendTo/). You might also try setting the visibility css attribute $(".content-panel").css("visibility","hidden"); as an additional measure (note that that will mean that the element still takes up space, see also http://www.w3schools.com/css/pr_class_visibility.asp) (edit: revert with $(".content-panel").css("visibility","visible");). Last but not least, you never know - maybe just using show(0); and hide(0); works and toggle is borked in some way - not probable, then again I guess murphy applies in this case.

Why does your onclick handler have the javascript: schema declaration in it?

<button onclick="$('.content-panel').toggle();">Toggle</button>

Is it ok with you to wrap the whole form elements with additional table? Something like this:

<!DOCTYPE html>
<html> <!-- xmlns="http://www.w3.org/1999/xhtml" lang="en" -->
<head>
    <style type="text/css">
    #content{position:relative}
    .inner {border-color:#999;border-style:solid}
    </style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>

<body>
    <button type="button" onclick="javascript:$('.content-panel').toggle();">Toggle</button>
    <div id="content">
        <div class="content-panel">
            <form action='' method='post'>
                <table>
                    <tr>
                        <td>
                            <select> 
                                <option>a </option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <table class="inner">
                                <tr><td>ABCDEF</td></tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </form>
        </div>
    </div>
</body>
</html>

Or just adding all elements under the form to the table you have:

    <form action='' method='post'>
            <table>
                <tr>
                    <td>
                        <select> 
                            <option>a </option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>
                        ABCDEF
                    </td>
                </tr>
            </table>
    </form>