由jQuery格式化的CSS不應用於隱藏的元素？

我正在將CSS應用到一些元素，並讓它們顯示：無;並且每當用戶點擊一個單選按鈕時，它將顯示：無;關閉元素並顯示它。由jQuery格式化的CSS不應用於隱藏的元素？

但是，我通過jQuery將CSS應用於這些元素。每當頁面被加載時，寬度不被應用。我有setwidth（1/2）或其他東西，它會找到父div的寬度，將它剪成兩半，並將其設置爲該寬度。但是，因爲整個div顯示爲none，只要頁面加載，它甚至不會抓住jquery函數來做到這一點...所以寬度是0px ..每當我加載DIV，它..所有這些都是有效的，基本上只是一個巨大的0px寬度的DIV。

我該如何去做這件事？

好吧，我在哪裏，wifi作爲JFiddle過濾並阻止訪問它。但這裏是我的標記：

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>

來源

2012-12-04 lilpeanut

你能告訴我們相關的代碼和標記嗎？ –

向我們展示您的代碼，HTML，CSS和jQuery。更好的是，製作一個jsFiddle – Lowkase

請包含一些代碼或JSFiddle鏈接。沒有代碼檢查/測試，幾乎不可能提供準確的答案。謝謝。 – TNCodeMonkey

顯示屬性設置爲none不保留元素的「空間」。您應該使用的可視性，而不是：

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

來源

2012-12-04 17:49:00

是的，我做到了，但它增加了表單最初佔用主窗體下方的令人討厭的空間......就像提交按鈕被推到另一個窗體下面一樣。我隱藏了主窗體中的一個子窗體...並且知名度並不會削減它D：我嘗試過。它解決了這個問題，但它在我的頁面上增加了一個巨大的令人討厭的空白空間。 – lilpeanut

我一直在使用這樣的功能：

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-04 17:55:32

由jQuery格式化的CSS不應用於隱藏的元素？

回答

相關問題