Question

我的HTML中有一个隐藏的部分，使用JQuery的'slideToggle'功能在按钮按下时显示和隐藏。

此按钮位于隐藏内容的下方，并且所有浏览器都很高兴，但ie7，有没有办法强制它动画而不必重写按钮，这样它就不会绝对定位？

<div class="hiddenContent">
<p>Hidden content is in here</p>
</div>
<div class="showmorecontainer">
<a class="showmore" href="#">SHOW</a>
</div>

由于

我为上下文添加了一些CSS和JQuery（注意上面的HTML已经简化）

CSS - .showmorecontainer { 高度：24px的; }

.showmore{
position:absolute;
left:0px;
bottom:0px;
height:22px;
background-image:url('../images/showmore.png');
background-repeat:no-repeat;
width:330px;
display:block;
padding-left:195px;
padding-top:2px;
}

JQuery -

$(".showmore").click(function(e) {
    $(this).parent().parent().find('.hiddenContent').slideToggle('slow',      function() {
        if($(this).is(":hidden")){
            $(this).parent().find('.showmore').html('SHOW ME MORE');
            $(this).parent().find('.arrow').removeClass('arrowup');
        }
        else{
            $(this).parent().find('.showmore').html('CLOSE BACK UP');
            $(this).parent().find('.arrow').addClass('arrowup');
        }
    });
    e.preventDefault();
});

Answer 1

你没有提到IE7是否会抛出任何错误，但如果是，你可能想要更仔细地检查它们。我目前无法访问IE7进行测试，但我想知道是否更改了这行代码......

$(this).parent().parent().find('.hiddenContent').slideToggle('slow', function() {

......对此...

$(this).parents().find('.hiddenContent').slideToggle('slow', function() {

......可能有帮助。

Answer 2

这似乎是IE7中CSS的一个问题。绝对定位的元素不会动画，但会跳到终点。我通过摆脱绝对定位并使用负边距来解决这个问题。

在ie7中，绝对定位元素不使用Jquery SlideToggle进行动画处理

2 个答案: