gpt4 book ai didi

IE 中的 jQuery slideToggle 和 div

转载 作者:行者123 更新时间:2023-11-27 22:39:27 24 4
gpt4 key购买 nike

我在使用 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 →

最佳答案

问题在于您对底边图像使用了 position: absolute,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,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1141398/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com