Как скрыть вложенную форму из jQuery под IE8 - PullRequest
Новая
       13

Как скрыть вложенную форму из jQuery под IE8

6 голосов
/ 29 апреля 2010

HTML-сегмент с элементом div, содержащим форму, содержащую таблицу: 

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

Кнопка переключения должна скрывать форму и ее вложенную таблицу, но в IE8 этого не происходит. (версия 8.0.60001) Содержимое формы скрывается, но граница таблицы продолжает отображаться и сохраняет свой размер. Это связано с режимом стандартов; он исчезает в режиме причуд.

Кто-нибудь есть обходной путь для этого?

Эта страница примера уменьшена настолько, насколько я могу ее уменьшить. Если я уберу select или один из divs, проблема исчезнет. Выбор должен присутствовать, и таблица должна быть вложена в форму, так как она будет содержать элементы формы.

Сама страница находится по адресу: http://dev.rdbhost.com/rdbadmin/mainProbDemo.html

Я опубликовал эту проблему ранее с чрезмерно упрощенным примером, который нельзя было воспроизвести. Спасибо, если вы посмотрели на это тогда.

Ответы [ 3 ]

2 голосов
/ 12 июня 2010

http://api.jquery.com/detach/ может работать для вас, если простое скрытие не работает - оно удалит элемент из dom, но сохранит его, чтобы вы могли повторно вставить его, если хотите (используя http://api.jquery.com/append/ или http://api.jquery.com/appendTo/). Вы также можете попробовать установить атрибут видимости css $(".content-panel").css("visibility","hidden"); в качестве дополнительной меры (обратите внимание, что это будет означать, что элемент все еще занимает место, см. также http://www.w3schools.com/css/pr_class_visibility.asp) (edit: revert) с $(".content-panel").css("visibility","visible");). И последнее, но не менее важное, вы никогда не знаете - может быть, просто использование show(0); и hide(0); работает, а переключение каким-то образом затруднено - маловероятно, но, опять же, я думаю, что в этом случае применяется Murphy.

1 голос
/ 17 июня 2010

Можно ли обернуть все элементы формы дополнительной таблицей? Примерно так: 

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

Или просто добавьте все элементы формы в таблицу, которую вы имеете: 

    <form action='' method='post'>
            <table>
                <tr>
                    <td>
                        <select> 
                            <option>a </option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>
                        ABCDEF
                    </td>
                </tr>
            </table>
    </form>
1 голос
/ 10 июня 2010

Почему ваш обработчик onclick содержит объявление схемы javascript: 

<button onclick="$('.content-panel').toggle();">Toggle</button>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...