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

我不确定这是否有助于你解决特殊问题，但你不应该在ul标签中放置div标签，你可以尝试用另一个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>

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

2 个答案: