jQuery slideDown не работает должным образом в IE7, отображается за содержимым ниже, а не опускает его вниз - PullRequest
Новая
       11

jQuery slideDown не работает должным образом в IE7, отображается за содержимым ниже, а не опускает его вниз

0 голосов
/ 11 января 2012

Я довольно новичок в jQuery и пытаюсь реализовать эффект slideDown / slideUp, который показывает div, содержащий форму контакта, когда пользователь нажимает кнопку или ссылку. Кнопка представляет собой <li> в неупорядоченном списке.

Он отлично работает во всех браузерах на моем Mac, а также работает в IE8 и IE9, однако в IE7 контент отображается (после плохой анимации, но не изящно раскрывается), но контактная форма появляется позади контента под ним, а не выдвигает содержание дальше вниз. Кроме того, когда отображается форма, нажатие на области ввода для ввода текста просто убирает div (через slideUp).

Я прочитал несколько постов на этом и других сайтах о добавлении зума: 1; и играть с позиции: относительная; и т.д., но ничего не сработало до этого момента. Любая помощь будет принята с благодарностью!

Заранее спасибо:)

Я включу код ниже, чтобы дать вам представление:

JQuery: 

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {

    $('#send_message li').click(function () {

        var text = $('.form');

        if (text.is(':hidden')) {
            text.slideDown('200');
            $(this).children('span').html('-');    
        } else {
            text.slideUp('200');
            $(this).children('span').html('+');    
        }

    });

});
</script>

HTML: 

<div id="message_form">
<ul id="send_message">
<li>
<span>+</span><h2>Send Us A Message</h2>
</li>
<div class="form"><!--Form goes here--></div>
</ul>
</div>

CSS: 

#message_form {
        display:block;
        clear:both;
        margin-top:0px;
        position:relative;
        width:940px;
        }

#send_message {
        color:#65b939;
        list-style-type:none;
        margin:0;
        padding:0;
        width:940px;
            }

#send_message li {
        background-color:#e9e9e9;
        cursor:pointer;
        height:45px;
        position:relative;    
        width:940px;           
    }

    #send_message span {
        font-size:18px;
        margin-left:12px;
        position:absolute;
        top:15px;
    }

    #send_message h2 {
        font-size:18px;
        margin-left:32px;
        position:absolute;
        top:15px;
    }

    #send_message .form {
        background-color:#fff;
        display:none;
        padding-top:10px;
        position:relative;
                }

Ответы [ 2 ]

0 голосов
/ 12 января 2012

Я не уверен, что это поможет вам решить какую-то конкретную проблему, но вы не должны помещать теги div в теги ul, вы можете попробовать заменить тег div на другой li? 

<div id="message_form">
    <ul id="send_message">
        <li>
            <span>+</span><h2>Send Us A Message</h2>
        </li>
        <li class="form">
            <!--Form goes here-->
        </li>
    </ul>
</div>
0 голосов
/ 11 января 2012

Вы можете использовать slideToggle, чтобы получить тот же эффект, и он работает и в IE7

...