IE中的jQuery滑动切换和div_Jquery_Css_Internet Explorer

IE中的jQuery滑动切换和div

jquery css internet-explorer

IE中的jQuery滑动切换和div,jquery,css,internet-explorer,Jquery,Css,Internet Explorer,我对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"></scrip

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


$（文档）.ready（函数（）{
$（“.toggle_container”）.hide（）；
$（“span.trigger”）。单击（函数（）{
$（this）.next（“.toggle_container”）.slideToggle（“slow”）；
});
});
div#prog{宽度：250px；背景：url（'http://imgur.com/ozduu.gif“）重复-y；位置：相对；边距：0自动；}
div#prog img{margin:0；padding:0；border:0；}
div#prog_mid{宽度：208px；边距：0自动；填充：0 20px；}
img#prog_bottom{位置：绝对；底部：0；}
span.trigger{宽度：100%；}
.toggle_容器{边距：0 0 5px；填充：0；背景：透明；溢出：隐藏；宽度：100%；清除：两者；}
.toggle_container.block{padding:5px；}
.block ul{列表样式：无；左侧填充：5px；顶部填充：0；顶部空白：0；}
.block ul li a{颜色：#169494；宽度：100%；显示：块；文本装饰：无；}
第一阶段

我试着做一个看起来像盒子的div，有轻微的坡度。在那个div中，我想显示/隐藏一个列表。我有一个图像作为上边框，另一个作为下边框，一个重复的图像作为背景。该列表在Firefox和Safari中运行良好，但在IE中会变得混乱

在Firefox或Safari中，div会扩展/收缩，看起来就像它应该做的那样。在IE中，底部图像显示在列表处于打开状态时的位置，即使列表已关闭

有没有办法解决这个问题？我要用正确的方法制作这个盒子吗

问题在于您对底边图像使用了position:absolute，IE7似乎把底边图像弄乱了

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

以下内容应该会有所帮助（我用红色作为中间内容的背景，而不是1px高的图像来说明修复方法-您需要创建图像并将其放置在红色的位置）


$（文档）.ready（函数（）{
$（“.toggle_container”）.hide（）；
$（“span.trigger”）。单击（函数（）{
$（“.toggle_container”）.slideToggle（“slow”）；
});
});
div#prog{宽度：250px；背景：红色；边距：0自动；}
div#prog img{margin:0；padding:0；border:0；display:block；}
div#prog_mid{宽度：208px；边距：0自动；填充：0 20px；}
div#prog img#prog#u dots{边距：10px 0；}
span.trigger{宽度：100%；}
.toggle_container.block{padding:5px；}
.block ul{列表样式：无；左侧填充：5px；顶部填充：0；顶部空白：0；}
.block ul li a{颜色：#169494；宽度：100%；显示：块；文本装饰：无；}
第一阶段

对不起，我忘了提到哪个版本。在IE7里搞砸了。感谢SolutionYogi使该页面在线可用。

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