用jquery设置宽度calc [英] setting width calc with jquery

问题描述

有人可以帮我正确添加calc宽度与jquery？

can someone help me properly add calc width with jquery? Or maybe theres a better option for dynamic width in jquery than applying css3 calc width?

var calc = "calc(100% - 270px)";

$(".two").focus(function () {
    $('.one').animate({ width: "85px" });
    $(this).animate({ "width": calc + "px" });
});

http://jsfiddle.net/N6vaj/1/

如果您需要更多说明，请告诉我们。感谢〜

Let me know if you need more description. Thanks~

推荐答案

在javascript calc（100％ - 270px）大致相等得到父元素的宽度（100％）并减去270

In javascript calc(100% - 270px) would roughly equal getting the width of the parent element (100%) and subtracting 270

$(this).parent().width() - 270;

这会给您带来

$(".two").focus(function () {
    var w = $(this).parent().width() - 270;

    $('.one').animate({ width: "85px" });
    $(this).animate({ "width": w });
});

FIDDLE

要使其适用于所有用户，您可以

To make it work on all of them, you could do

var inputs = $(".one, .two, .three");

inputs.on('focus', function () {
    var w = $(this).parent().width() - 270;

    inputs.not(this).animate({ width: "85px" });
    $(this).animate({ "width": w });
});

FIDDLE

这篇关于用jquery设置宽度calc的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！