无法隐藏我的网页部分，但相同的代码适用于JSFiddle

Question

我想从jquery中使用toggle（）（或hide（）），但它不起作用。

我知道我用的语法不错。它适用于jsFiddle，但我无法使其与剃刀视图一起工作。

这里是我想使用的代码：

<script type="text/javascript"> 
     $(".hidden").toggle(); 
    </script> 

@Using Html.BeginForm(IsPost) 
@Html.ValidationSummary(True) 
@<fieldset> 
    <legend>contact</legend> 
    <table> 
     <tr> 
     <td><h3>@Html.Raw("Données personnelles : ")</h3></td> 
     </tr> 

     <tr> 
     <td>@Html.Raw("Nom : ")</td> 
     <td>@Html.EditorFor(Function(model) model.nom) 
     @Html.ValidationMessageFor(Function(model) model.nom)</td> 

     <td>@Html.Raw("Prénom : ")</td> 
     <td>@Html.EditorFor(Function(model) model.prenom) 
     @Html.ValidationMessageFor(Function(model) model.prenom)</td> 
     </tr> 

     <tr> 
     <td class="hidden">@Html.Raw("Date de naissance : ")</td> 
     <td>@Html.EditorFor(Function(model) model.dateNaissance) 
     @Html.ValidationMessageFor(Function(model) model.dateNaissance)</td> 
     </tr> 

    </table> 
    <p> 
     <input type="submit" value="Create" /> 
    </p> 
</fieldset> 
End Using 

所生成的HTML代码如下：

<tbody><tr> 
     <td><h3>Données personnelles : </h3></td> 
     </tr> 

     <tr> 
     <td>Nom : </td> 
     <td><input class="text-box single-line" id="nom" name="nom" value="" type="text"> 
     <span class="field-validation-valid" data-valmsg-for="nom" data-valmsg-replace="true"></span></td> 



     <td>Prénom : </td> 
     <td><input class="text-box single-line" id="prenom" name="prenom" value="" type="text"> 
     <span class="field-validation-valid" data-valmsg-for="prenom" data-valmsg-replace="true"></span></td> 
     </tr> 

     <tr> 
     <td class="hidden">Date de naissance : </td> 
     <td><input class="text-box single-line" id="dateNaissance" name="dateNaissance" value="" type="text"> 
     <span class="field-validation-valid" data-valmsg-for="dateNaissance" data-valmsg-replace="true"></span></td> 
     </tr> 

这里是与这些跨度CSS：

 /* Styles for validation helpers 
     -----------------------------------------------------------*/ 
     .field-validation-error { 
      color: #ff0000; 
     } 

     .field-validation-valid { 
      display: none; 
     } 

     .input-validation-error { 
      border: 1px solid #ff0000; 
      background-color: #ffeeee; 
     } 

     .validation-summary-errors { 
      font-weight: bold; 
      color: #ff0000; 
     } 

     .validation-summary-valid { 
      display: none; 
     } 

     /* Styles for editor and display helpers 
     ----------------------------------------------------------*/ 
     .display-label, 
     .editor-label { 
      margin: 1em 0 0 0; 
     } 

     .display-field, 
     .editor-field { 
      margin: 0.5em 0 0 0; 
      position:relative; 
      left:5px; 
     } 

     .text-box { 
      width: 30em; 
     } 

     .multiline 
     { 
      height: 6.5em; 
      position:relative; 
      left:5px; 
     } 

     .tri-state { 
      width: 6em; 
     } 
     .display-field 
     { 
      font-size:1.5em; 
     } 

我能做些什么绕过所有这些东西来隐藏页面的某些部分？

Answer 1

如果你的代码真的被引述，它的工作原理上的jsfiddle而不是在你的代码的原因是的jsfiddle是包括您的脚本之后的的HTML，但您的代码正在运行之前的这些元素存在于DOM中。

你有两个选择：

1. 把你的脚本在页面的年底，刚刚闭幕</body>标记之前。我推荐这个，as do the YUI team。

2. 使用jQuery的ready功能（人们经常使用它的混乱快捷方式，这仅仅是passing a function into the jQuery function，这通常是别名为$）安排您的代码在“DOM准备”运行。

Answer 2

<script type="text/javascript"> 
$(document).ready(function(){ 
     $(".hidden").toggle(); 
}); 
    </script> 

Answer 3

我看不到需要使用JavaScript（或jQuery）。如果你想与类hidden最初将被隐藏的元素，只使用一个CSS声明：

.hidden { 
    display: none; 
}