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

【问题标题】：jQuery animate using a variable doesn't work in OSX Safari使用变量的 jQuery 动画在 OSX Safari 中不起作用
【发布时间】：2015-06-10 21:56:10
【问题描述】：

我有一个折叠/展开功能适用于所有设备（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;
}

【问题讨论】：

您能否发布相关的 HTML，以便我们尝试查看 ele.css('right') 返回的内容？
添加了相关的标记。如果您需要查看开发站点以获取实时示例，请告诉我。
Safari 会在每次单击 .expansion-trigger' 时识别变量，但正如您所指出的，行为是不同的。让我再挖掘一点，然后回复你。

标签： javascript jquery css safari jquery-animate

【解决方案1】：

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

【讨论】：