2014-04-03 109 views
0

我用django制作了一个表单,并创建了3个类别。 现在与slideToggle()我可以隐藏或显示窗体的一部分。现在我尝试默认隐藏第二个和第三个选项卡。那就是我卡住的地方。django jquery默认隐藏

我的Django的模板:

<form action="{% url 'item_create' %}" method="post">{% csrf_token %} 
    <ul> 
     <li class="title">Basic information</li> 
     <li class="fields"> 
     {% for field in item_form %} 
      {% if field.name == "min_level" %} 
     </li> 
     <li class="title">Requirements</li> 
     <li class="fields"> 
      {% endif %} 
      {% if field.name == "strength" %} 
     </li> 
     <li class="title">Bonus</li> 
     <li class="fields"> 
      {% endif %} 
      <p><b>{{ field.label_tag }}</b>{{ field }}</p> 
     {% endfor %} 
     </li> 
    </ul> 
    <input type="submit" value="Submit" /> 
</form> 

我的脚本:

$(function(){ 
    $('li.fields').filter(":nth-child(3)").hide(); 
    $('ul').on('click', 'li.title', function(){ 
     $(this).next().slideToggle(200) 
    }) 
}); 

我是新来的JavaScript,我不完全理解的 “选择” 有人可以请帮我在这里。

回答

1

:nth-child(3)将匹配第三个子元素。在你的情况下,它不会是非常优雅的解决方案,因为这些孩子混合了CSS类。

具体而言,您的过滤元素(分类为fields)分别为第2,4和6子。

相反,你可能想要做slicing with jQuery

$(function(){ 
    $('li.fields').slice(1).hide(); 
    // and then the on-click stuff... 
});