Question

我有一个适用于所有内容的折叠/展开功能（ Chrome / Firefox / IE / Mobile Safari ），但在OSX Safari 8中无效。

我已经将其缩小到源于Safari的问题，而不是在所有其他浏览器都能识别我的“maxheight”变量时。如果我将变量更改为数字，它可以正常工作。这些expand/collapse触发器可以处理具有不同最大高度的内容模块，因此我需要它作为变量。

任何人都有使用Safari的经验导致此问题吗？

这是JS：

jQuery(document).on('click', '.expansion-trigger', function(e) {
    var el = jQuery(this).parent().prev('.expansion-holder');
    var btn = jQuery(this);
    var ex = '.expansion';
    var exp = '.expansion-trigger';
    var hide = btn.removeClass('show').addClass('hide');
    var hd = 'hide';
    var sh = 'show';
    var ele = jQuery(this).parent().prev().prev();
    var maxheight = ele.css('right');
    var gpa = btn.parent().parent();
    e.preventDefault();

    if (btn.hasClass('plus')) {
        hide.parent().next(ex).find(exp).removeClass(hd).addClass(sh);
        el.animate({
            'max-height': 3000
        }, 1000);
        gpa.find('.blur').slideToggle();
    } else if (jQuery('html').hasClass('touch')) {
        hide.parent().prev(ex).find(exp).removeClass(hd).addClass(sh);
        ele.removeAttr('style');
        var marg = ele.offset().top - 60;
        jQuery('html, body').animate({
            scrollTop: marg
        }, 1300);
    } else {
        hide.parent().prev(ex).find(exp).removeClass(hd).addClass(sh);
        ele.animate({
            'max-height': maxheight
        }, 800);
        gpa.find('.blur').delay(400).slideToggle();
    }

});

相关HTML：

<section class="synopsis">
    <?php if( $synopsis = get_field('show_synopsis') ) { ?>
        <h2 class="content__heading u-mb0">Synopsis</h2>
        <div class="synopsis-holder expansion-holder">
            <?php echo $synopsis; ?>
            <p class="blur"></p>
        </div>
        <p class="expansion">
            <a href="#" class="plus show expansion-trigger">Read more <i class="fa fa-plus"></i>
            </a>
        </p>
        <p class="expansion">
            <a href="#" class="minus hide expansion-trigger">Read less <i class="fa fa-minus"></i>
            </a>
        </p>
    <?php } ?>
</section>

这可能不是最佳解决方案，但我在各个持有者中使用right属性在模块崩溃时重置max-height值。例如：

.synopsis-holder {
    max-height: 17rem;
    overflow: hidden;
    right: 17rem;
}

Answer 1

我使用right属性的值进行了报废，并在标记中使用了data-height="17rem"等数据属性来存储和获取值。

使用变量的jQuery动画在OSX Safari中不起作用

1 个答案: