如何使隐藏的选择在未隐藏时显示正确的宽度？

Question

在我的表单中，用户在代表文本或数字值的数据之间进行选择。 当他们选择数字值时，我希望在它旁边出现一个单位选择。 这个功能都很好，但是，根据单位选择跨度是否开始隐藏，我得到了不同的显示。 如果单位选择开始可见(不希望)，单位选择栏将拥有一个正的长度。 然而，如果它开始隐藏（通过启用下面的注释行），单位选择将显示为一个没有宽度的皱缩选择。 周围网格字段中的内容会适当地显示。

请注意，在开发这个的时候，我还没有为选择字段填充任何选项，尽管我允许用户添加自己的条目。 我希望该字段无论内容如何都保持相同的大小，以便与其他行在视觉上保持一致。

var unitSpan = $('<span>')
                    .attr('id', "unit_selection_" + transactionNum)
                    .attr('style', "grid-column-start:8; grid-column-end:10")
            //      .attr('hidden','hidden')
                    .appendTo(linkSet);
$('<span>')
    .text("units: ")
    .appendTo(unitSpan);

var unitSelect = $('<Select>')
    .attr('class', "chosen-select-single-select chosen-units")
    .attr('id', "newRelationshipRecipientUnits" + transactionNum)
    .attr('name', "newRelationship_" + transactionNum + "_unit")
    .attr('style', "width: 150px;grid-column-start:8;grid-column-end:10")
    .appendTo(unitSpan);

Answer 1

使用可见性样式而不是隐藏，单位跨度仍然会消耗布局中的空间，所以你不需要玩宽度。

var unitSpan = $('<span>')
                .attr('id', "unit_selection_" + transactionNum)
                .attr('style', "grid-column-start:8; grid-column-end:10")
                .css({'visibility':'hidden'})
                .appendTo(linkSet);

然后使用

unitSpan.css('visibility','')

来使元素可见。

另外，如果你使用jQuery css()方法，你就不会把你的样式值打乱。 看起来你重复 "grid-column-start:8; grid-column-end:10 "就是因为这个。

var unitSpan = $('<span>')
            .attr('id', "unit_selection_" + transactionNum)
            .css({"grid-column-start" :"8", "grid-column-end":"10", "visibility":"hidden"})
            .appendTo(linkSet);

然后使用其中一个方法来显示它，而不是重置整个样式，这会导致其他问题。

unitSpan.css('visibility','');

unitSpan.show();