正确使用Django模板中的boostrap

Question

我有这种模式的等级顺序：课程、学习计划、系和院系。我有两列在引导。第一栏列出所有院系及其具体部门和每个部门的学习计划。第二列列出了所有课程。我希望当有人点击某个教员时，在第二栏中显示该教员的具体课程，替换所有课程，对于部门或学习计划也是如此。现在，我尝试了一些东西，但我不知道如何达到这个结果。我不知道如何列出每个学院的课程，你可以注意到，我把faculties.0作为一个测试。你知道吗

<script> $('#btnClick').on('click', function () { if ($('#1').css('display') != 'none') { $('#2').show().siblings('div').hide(); } else if ($('#2').css('display') != 'none') { $('#1').show().siblings('div').hide(); } }); </script> <div class="row"> <div class="col-md-3"> <div class="jumbotron"> <h4>Search courses</h4> <hr> <br> <ul> {% for faculty in faculties %} <li id="btnClick">{{ faculty.name }}</li> <ul> {% for department in departments %} {% if department.faculty == faculty %} <li>{{ department.name }}</li> <ul> {% for study in studies %} {% if study.department == department %} <li>{{ study.name }}</li> {% endif %} {% endfor %} </ul> {% endif %} {% endfor %} </ul> {% endfor %} </ul> </div> </div> <div class="col-md-9"> <div class="jumbotron"> <div id="1"> <h3>All courses</h3> <ul> {% for course in courses %} <li> <a id="first" href={{ course.slug }}>{{ course.name }}</a> </li> {% endfor %} </ul> </div> <div id="2" style="display:none;"> <h3> {{ faculties.0 }} courses</h3> <ul> {% for course in courses %} <li> <a id="first" href={{ course.slug }}>{{ course.name }}</a> <p>chinchin</p> </li> {% endfor %} </ul> </div> </div> </div> </div>

Answer 1

好吧，我认为你的问题的一部分是你想要第二个隐藏的div，上面列出了特定于教师的课程，但是你当前的HTML模板只会给你一个隐藏的div，里面只有一个教师的课程。每个教职员工需要一个隐藏分区。你知道吗

NB：我不会用隐藏div这样做，我个人会用Bootstrap的tab/pill style。你知道吗

不管怎样，我认为下面应该给你你想要的那种结果。显然我不能用你的模型来测试。我已将模板更改为使用related objects notation而不是您的if ==样式。你知道吗

我还对jQuery做了一些修改。希望它是可以的，尽管它的效果是#1div只有在单击任何链接之前才可见。你知道吗

更新了：我错过了div id中faculty.name周围的{{ }}，而且我也没有将jQuery脚本包装在$(document).ready()中或包含jQuery cdn。它现在应该能按预期工作了。你知道吗

更新2：将元素的id更改为使用faculty.pk，它应该是一个数字，并避免任何空格问题。你知道吗

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
    $('.btnClick').on('click', function() {
        var faculty_id = $(this).attr('id');
        $('#'+faculty_id+'_tab').show().siblings('div').hide();
    })
})
</script>
 <div class="row">
    <div class="col-md-3">
        <div class="jumbotron">
            <h4>Search courses</h4>
            <hr>
            <br>
            <ul>
                {% for faculty in faculties %}
                    <li class="btnClick" id="fac_{{ faculty.pk }}">{{ faculty.name }}</li>
                    <ul>
                        {% for department in faculty.department_set.all %}
                            <li>{{ department.name }}</li>
                            <ul>
                                {% for study in department.study_set.all %}
                                    <li>{{ study.name }}</li>
                                {% endfor %}
                            </ul>
                        {% endfor %}
                    </ul>
                {% endfor %}
            </ul>
        </div>
    </div>
    <div class="col-md-9">
        <div class="jumbotron">
            <div id="1">
                <h3>All courses</h3>
                <ul>
                    {% for course in courses %}
                        <li>
                            <a class="first" href={{ course.slug }}>{{ course.name }}</a>
                        </li>
                    {% endfor %}
                </ul>
            </div>
            {% for faculty in faculties %}
            <div id="fac_{{ faculty.pk }}_tab" style="display:none;">
                <h3> {{ faculty.name }} courses</h3>
                <ul>
                    {% for department in faculty.department_set.all %}
                    {% for study in department.study_set.all %}
                    {% for course in study.study_set.all %}
                        <li>
                            <a class="first" href={{ course.slug }}>{{ course.name }}</a>
                            <p>chinchin</p>
                        </li>
                    {% endfor %}
                    {% endfor %}
                    {% endfor %}
                </ul>
            </div>
            {% endfor %}
        </div>
    </div>
</div>