1

我正在将 CSS 应用于某些元素并让它们显示：无；并且每当用户单击单选按钮时，它将显示：无；关闭元素并显示它。

但是，我通过 jQuery 将 CSS 应用于这些元素。每当加载页面时..不应用宽度。我有 setwidth(1/2) 或其他东西，它会找到父 div 的宽度，将其切成两半，然后将该宽度设置为该宽度。但是，由于整个 div 显示为无，一旦加载页面，它甚至不会抓取该 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>
4

2 回答 2

0

我总是使用这样的功能：

    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 插件，但我使用它作为我的帮助对象的方法。

于 2012-12-04T17:55:32.503 回答
0

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

$('#myelem').css('visibility','hidden');
$('#myelem').css('visibility','visible');
于 2012-12-04T17:49:00.513 回答