Question

我用django制作了一个表格并制作了3个类别。现在使用slideToggle（）我可以隐藏或显示表单的一部分。现在我尝试默认隐藏第二个和第三个选项卡。这就是我被卡住的地方。

我的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的新手，我不完全理解“选择器”，有人可以帮助我。

Answer 1

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

具体来说，您过滤的元素（类fields）分别是第2，第4和第6个孩子。

相反，您可能想要slicing with jQuery：

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

django jquery默认隐藏

1 个答案: