Question

Django with Bootstrap 3

我正在处理常见问题解答系统的仪表板视图。我已经设置了按章节分组的文章。部分名称是列表组中的标题，单击时将展开另一个列表组，其中包含与该组相关的所有文章。

我遇到的问题是，我希望将折叠设置为像手风琴一样工作。我已经按照bootstrap 3的指南来完成这个，但当我点击一个新的部分打开时，没有任何先前打开的部分崩溃关闭。我已经用尽了其他指南，但代码看起来正确但手风琴功能无效。

我的代码：

{% block content %}
<div class="iron-faq">
    <div class="container">
        <div class="col-md-6">
            <h3>Sections</h3>
            <div class="list-group" id="accordion" aria-multiselectable="true">
            {% regroup articles by section as section_list %}


                {% for section in section_list %}
                    <a href="#section-{{ section.grouper.id }}" 
                        class="list-group-item list-header"
                        data-toggle="collapse" 
                        data-parent="#accordion" 
                        data-target="#section-{{ section.grouper.id  }}" 
                        aria-controls="section-{{ section.grouper.id }}">
                        <i class="fa fa-bars"></i> {{ section.grouper }} 
                        <span class="badge pull-right">{{ section.grouper.article_count }}</span>
                    </a>
                    <div class="panel-collapse collapse" id="section-{{ section.grouper.id }}">
                        {% for article in section.list %}
                            <a href="{{ article.get_absolute_url }}" class="list-group-item">
                                {{ article.title }}
                            </a>
                        {% endfor %}
                    </div>
                {% endfor %}
            </div>
        </div>
        <div class="col-md-6">
            <h3>Useful Articles</h3>
            <div class="list-group">
                <div class="favorites">
                {% for favorite in favorites %}
                    <a href="{{ favorite.get_absolute_url }}" class="list-group-item">
                        <h5 class="list-group-item-heading">{{ favorite.title }}</h5>
                        <p class="list-group-item-text">{{ favorite.section.name }}</p>
                    </a>
                {% endfor %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

Answer 1

你必须用以下内容包装每个部分：

<div class="panel"></div>

所以你的html看起来如下：

{% block content %}
<div class="iron-faq">
    <div class="container">
        <div class="col-md-6">
            <h3>Sections</h3>
            <div class="list-group" id="accordion" aria-multiselectable="true">
            {% regroup articles by section as section_list %}


                {% for section in section_list %}
                    <div class="panel">
                        <a href="#section-{{ section.grouper.id }}" 
                            class="list-group-item list-header"
                            data-toggle="collapse" 
                            data-parent="#accordion" 
                            data-target="#section-{{ section.grouper.id  }}" 
                            aria-controls="section-{{ section.grouper.id }}">
                            <i class="fa fa-bars"></i> {{ section.grouper }} 
                            <span class="badge pull-right">{{ section.grouper.article_count }}</span>
                        </a>
                        <div class="panel-collapse collapse" id="section-{{ section.grouper.id }}">
                            {% for article in section.list %}
                                <a href="{{ article.get_absolute_url }}" class="list-group-item">
                                    {{ article.title }}
                                </a>
                            {% endfor %}
                        </div>
                    </div>
                {% endfor %}
            </div>
        </div>
        <div class="col-md-6">
            <h3>Useful Articles</h3>
            <div class="list-group">
                <div class="favorites">
                {% for favorite in favorites %}
                    <a href="{{ favorite.get_absolute_url }}" class="list-group-item">
                        <h5 class="list-group-item-heading">{{ favorite.title }}</h5>
                        <p class="list-group-item-text">{{ favorite.section.name }}</p>
                    </a>
                {% endfor %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

希望这有帮助！

Django：Bootstrap Accordion没有处理Regroup内容

1 个答案: