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

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")来存储和获取值。