jQuery slideDown 在 IE7 中无法正常工作，出现在下面的内容后面而不是向下推

Question

我对 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;
                }   

Answer 1

您可以使用 slideToggle 来获得相同的效果，它也适用于 IE7

Answer 2

我不确定这是否对你有特殊的问题，但你不应该将 div 标签放在 ul 标签中，你可以尝试用另一个 li 替换 div？

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