Question

我正在将CSS应用于某些元素，我将它们显示为：none;每当用户点击一个单选按钮时，它将采用display：none;关闭元素并显示它。

但是，我通过jQuery将CSS应用于这些元素。无论何时加载页面..都不应用宽度。我有setwidth（1/2）或者其他东西，它会找到父div的宽度，将其切成两半，并将宽度设置为该宽度。但是，由于整个div显示为none，一旦页面加载，它甚至不会GRAB那个jquery函数来做...所以宽度是0px ..每当我加载DIV时，它...已经全部消失了，基本上只是一个巨大的0px宽度DIV。

我该怎么做？

好的我在哪里，因为JFiddle过滤了阻止访问它的wifi。但这是我的标记：

HTML：

<fieldset id="new_item">
    <legend>New Item</legend>
    <div class="input-row">
        <div class="input-wrap setwidth(1/2)">
            @Html.LabelFor(model => model.ProductDescription, T("Product Description (maximum of 30 characters"))
            @Html.TextBoxFor(model => model.ProductDescription, new { @class = "setwidth(1)", @maxlength = "30" })
        </div>
        <div class="input-wrap setwidth(1/2)">
            @Html.LabelFor(model => model.ProductClass, T("Product Class"))
            @Html.DropDownListFor(model => model.ProductClass, new System.Web.Mvc.SelectList(Model.ProductClasses, "Value", "Key"), new { @class = "setwidth(1)" })
        </div>
    </div>

还有更多，但接下来是我的jQuery和CSS：

<style type="text/css">
.hide { display: none; }
</style>
<script type="text/javascript">
    $(document).ready(function () {
        $('#new_item').addClass('hide');
        $('#existing_item').addClass('hide');
        $('#StateOfItem').change(function () {
            //every time value of StateOfItem is changed
            if ($('.new_item').is(':checked')) {
                $('#new_item').removeClass('hide');
                $('#existing_item').addClass('hide');
            }
            else if ($('.existing_item').is(':checked')) {
                $('#new_item').addClass('hide');
                $('#existing_item').removeClass('hide');
            }
        });
    });
</script>

Answer 1

显示属性设置为none不会保留元素的“空间”。您应该使用可见性：

$('#myelem').css('visibility','hidden');
$('#myelem').css('visibility','visible');

Answer 2

我总是使用这样的功能：

    function getBlockWidth(block) {
        var oldStyle = block.attr('style');
        block.css({
            'display' : 'block',
            'visibility' : 'hidden',
            'position' : 'absolute'
        });
        var h = block.outerWidth();
        block
            .removeAttr('style')
            .attr('style', oldStyle);
        return h;
    }

用法：

var someItemWidth = getBlockWidth( $('#new_item') );

您可以将其重写为jQuery插件，但我将其用作我的帮助对象的方法。

由jQuery格式化的CSS不适用于隐藏元素？

2 个答案: