Question

我遇到了jQuery的slideToggle和IE中的div问题。我的代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
    <script type="text/javascript" src="jquery.js"></script>

    <script type="text/javascript">

    $(document).ready(function() {
        $(".toggle_container").hide();

        $("span.trigger").click(function(){
            $(this).next(".toggle_container").slideToggle("slow");
        });
    });

</script>

<style type="text/css">
div#prog { width:250px; background:url('http://imgur.com/ozduu.gif') repeat-y; position:relative; margin:0 auto;}
div#prog img { margin:0; padding:0; border:0;}
div#prog_mid { width: 208px; margin:0 auto; padding: 0 20px;}

img#prog_bottom { position:absolute; bottom:0;}


span.trigger { width: 100%;}
.toggle_container { margin:0 0 5px; padding:0; background:transparent; overflow:hidden; width:100%; clear:both;}
.toggle_container .block { padding: 5px; }

.block ul { list-style:none; padding-left:5px; padding-top:0; margin-top:0;}
.block ul li a { color:#169494; width:100%; display:block; text-decoration:none;}

</style>
</head>

<body>
<div id="prog">
    <img src="http://imgur.com/po7R1.gif"/>
    <div id="prog_mid">
        <h1>Phase 1</h1>
        <img id="prog_dots" src="http://imgur.com/anDNd.gif"/>
            <span class="trigger"><a href="#">CLICK HERE</a></span>
            <div class="toggle_container">
                <div class="block">
                    <ul>
                        <li><a href="">list item 1</a></li>
                        <li><a href="">list item 2</a></li>
                        <li><a href="">list item 3</a></li>
                        <li><a href="">list item 4</a></li>
                        <li><a href="">list item 5</a></li>
                    </ul>
                </div>
            </div>
        <br />
    </div>
    <img id="prog_bottom" src="http://imgur.com/r3fcf.gif" />
</div>

我正在尝试制作一个看起来像一个带有轻微渐变的盒子的div。在那个div我想显示/隐藏一个列表。我有一个图像作为顶部边框，另一个作为底部边框，并重复一个作为背景。该列表在Firefox和Safari中运行良好，但是当涉及到IE时，事情会变得混乱。

在Firefox或Safari中，div扩展/收缩并看起来像它应该如何。在IE中，底部图像出现在列表处于打开状态的位置，即使它已关闭。

有关如何解决此问题的任何想法？我打算以正确的方式制作这个盒子吗？

Demo Page →

Answer 1

问题在于你使用位置：底边图像的绝对值，IE7似乎搞乱了。

我认为最好的方法是简化一些事情。对于主背景，我会使用一个垂直重复的1px高图像，这样你就可以灵活地放入这里的内容，你可以放弃绝对定位底边图像。使用这种方法，底部边缘图像将位于中间内容的底部，无论它是展开还是收缩。

以下内容应该有所帮助（我使用红色作为中间内容的背景代替1px高图像来说明修复 - 您需要创建图像并将其放入以代替红色）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<!--

  Created using http://jsbin.com
  Source can be edited via http://jsbin.com/ugaza/edit

-->

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

    <script type="text/javascript">

    $(document).ready(function() {
        $(".toggle_container").hide();

        $("span.trigger").click(function(){
            $(".toggle_container").slideToggle("slow");
        });
    });

</script>

<style type="text/css">

div#prog { width:250px; background: red; margin:0 auto; }
div#prog img { margin:0; padding:0; border:0; display: block; }
div#prog_mid { width: 208px; margin:0 auto; padding: 0 20px; }
div#prog img#prog_dots { margin: 10px 0; }
span.trigger { width: 100%;}
.toggle_container .block { padding: 5px; }
.block ul { list-style:none; padding-left:5px; padding-top:0; margin-top:0;}
.block ul li a { color:#169494; width:100%; display:block; text-decoration:none;}

</style>
</head>

<body>

<div id="prog">
    <img src="http://imgur.com/po7R1.gif"/>
    <div id="prog_mid">
        <h1>Phase 1</h1>
        <span class="trigger"><a href="#">CLICK HERE</a></span>
        <img id="prog_dots" src="http://imgur.com/anDNd.gif"/>

            <div class="toggle_container">
                <div class="block">
                    <ul>
                        <li><a href="">list item 1</a></li>
                        <li><a href="">list item 2</a></li>
                        <li><a href="">list item 3</a></li>
                        <li><a href="">list item 4</a></li>
                        <li><a href="">list item 5</a></li>
                    </ul>
                </div>
            </div>

    </div>
    <img id="prog_bottom" src="http://imgur.com/r3fcf.gif" />
</div>

</body>

</html>

IE中的jQuery slideToggle和div

1 个答案: