个人中心
gpt4 book ai didi

jquery - IE8、jquery 轮播。使用 javascript 更改项目宽度

转载 作者：行者123 更新时间：2023-12-01 05:04:32 24 4
gpt4 key购买 nike

我在使用 jQuery 制作轮播时遇到了问题。它适用于 Chrome、FF、IE7 和 IE9。 IE8 是唯一有问题的浏览器。

轮播中的项目并排 float ，当单击某个项目时，其宽度会扩展以显示内容。如果再次单击，它会缩回到原来的宽度。

问题是，当我单击其中一个项目(item1)时，它不起作用。当我用IE的开发工具查看它时，我可以清楚地看到它实际上是打开的。它只是不呈现更改。然后，如果我单击 item1 (item2) 右侧的元素，item1 会跳转到扩展宽度而不产生动画。如果我再次单击 item1，它会缩回到原始宽度，这就是问题发生的地方。 Item2 应该位于 item1 旁边，但它仍然位于右侧很远的地方。

我用一个比我原来的项目简单得多的例子复制了这个问题，因为它相当大。可以在这里找到:http://sevanteri.com/testing/ie/scrollthing/完整的 html/css/js 源代码也粘贴在下面。

如何复制(首先使用其他浏览器进行测试，看看它应该如何工作):

  1. 向右滚动 Pane ，以便您可以看到第三个(黄色)和第四个(灰色)元素
  2. 点击黄色元素
  3. 点击灰色元素
  4. 再次点击黄色元素

现在您应该在黄色元素的右侧看到黑色(项目父元素的颜色)。如果向右滚动，您可以看到那里的灰色元素。

我的问题是，以前有人遇到过这个问题吗？有解决办法吗？

来源:

<!DOCTYPE html> 
<html> 
<head><title>ie testing</title> 

<style type="text/css"> 

    #test {height: 150px; background-color: black; overflow:auto;position:relative;width:700px;border: 1px solid black;}
    #pane {width: 5000px;position:relative;}
    .item {width: 240px; height: 150px; float:left; overflow: hidden; position:relative;}
    #item1 {background-color: red;}
    #item2 {background-color: blue;}
    #item3 {background-color: yellow;}
    #item4 {background-color: gray;}
    #item5 {background-color: pink;}
    #item6 {background-color: white;}
    .item-content { height: 150px; width: 2px;} /* this didn't seem to affect anything */

</style> 

</head> 
<body> 

  <div id="test"> 
    <div id="pane"> 
        <div id="item1" class="item"><div class="item-content"> </div></div> 
        <div id="item2" class="item"><div class="item-content"> </div></div> 
        <div id="item3" class="item"><div class="item-content"> </div></div> 
        <div id="item4" class="item"><div class="item-content"> </div></div> 
        <div id="item5" class="item"><div class="item-content"> </div></div> 
        <div id="item6" class="item"><div class="item-content"> </div></div> 
        <div style="clear:both; float:none;"> </div> 
    </div> 
  </div> 

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 
<script type="text/javascript"> 
    t = $("#test");
    $pane = $("#pane");
    $items = $(".item", $pane);
    startw = $($items[0]).width();

    $(".item", $pane).click(function() {
        $t = $(this);
        if ($t.width() == startw) {
            $t.animate({width:700}, 200);
        } else {
            $t.animate({width:startw}, 200);
        }
    });

    asd1 = $("#item1");
    asd2 = $("#item2");
    asd3 = $("#item3");
    asd4 = $("#item4");
    asd5 = $("#item5");
    asd6 = $("#item6");

</script> 
</body> 
</html>

最佳答案

deadeye536 在 facepunch.com 找到了某种解决方案.

Looks like IE8 is failing to redraw.

This is a very ugly solution, but it's the only one I could come up with.

$(".item", $pane).click(function() {
    $t = $(this);
    if ($t.width() == startw) {
        $t.animate({width:700}, 200);
    } else {
        $t.animate({width:startw}, 200);
    }
window.setTimeout(function() {
    if ($.browser.msie&&$.browser.version.slice(0,1)=="8") {
        $('.item').each(function() {
            this.style.cssText = this.style.cssText;
        });
    }
}, 205);
});

所以它基本上重置了项目的 CSS。它看起来仍然不完美，但我可以忍受。至少现在可以了。

关于jquery - IE8、jquery 轮播。使用 javascript 更改项目宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7012042/

24 4 0
文章推荐： jquery - Chrome 中未调用我的 jquery 提交处理程序
文章推荐： jQuery 插件 - 调用公共(public)函数/方法
文章推荐： Oracle AWR - 高 SQL 解析调用但 0 次执行
文章推荐： jquery 仅更改当前行的图像 src
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com