Django中的Bootstrap崩溃问题 [英] Bootstrap collapse issue in Django

问题描述

我正在尝试在Django中使用引导页，不幸的是，折叠列表组项无效。

I'm trying to use a bootstrap page in Django, and unfortunately the collapsing of list-group items does not work.

html中的相关部分：

The relevant parts from the html:

<link rel="stylesheet" href="{% static 'conf/css/bootstrap.css' %}">

      <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingTwo">
          <h4 class="panel-title">
            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
              Header
            </a>
          </h4>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
          <div class="list-group">
            <a href="#" class="list-group-item">Item1</a>
            <a href="#" class="list-group-item">Item2</a>
          </div>
        </div>
      </div>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
<script src="{% static 'conf/js/jquery-1.11.2.min.js' %}"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="{% static 'conf/js/bootstrap.min.js' %}"></script>

单击标题时，＃collapseTwo信号将发送到浏览器到我的Django应用程序而不是折叠列表（例如：127.0.0.1：8000 / conf /＃collapseTwo。）在django之外可以正常工作。在django中，除了可以正常工作以外，其他所有功能（css，链接，图像等）也可以

When clicking on the header, the "#collapseTwo" signal is sent to the browser to my django application instead of collapsing the list (eg:127.0.0.1:8000/conf/#collapseTwo"). Outside django collapsing work fine. Within django everything else besides collapsing work fine (css, links, images, etc)

Django项目中的网址格式：

URL patterns in django project:

urlpatterns = [
url(r'^$', RedirectView.as_view(url='conf', permanent=False), name='index'),
url(r'^accounts/login/$', 'django.contrib.auth.views.login', {'template_name': 'admin/login.html'}),
url(r'^accounts/logout/$', 'django.contrib.auth.views.logout'),
url(r'^admin/', include(admin.site.urls)),
url(r'^conf/', include('conf.urls')),
]

应用程序的网址格式为 conf：

URL pattern of the app called "conf":

urlpatterns = [
url(r'^$', views.index, name='index'),
]

m的关键部分视图：

def index(request):

    object = AudioSetting.objects.get(pk=1)
    DefaultText = object.text   
    context = {'DefaultText': DefaultText,}

    template = "conf/index.html"

    return render(request, template, context)

请问如何在django中进行折叠工作

Could you please advise how to make collapsing work within django too?

编辑：呈现页面时来自django服务器的消息，包括正在使用的js和css：

messages from the django server when rendering the page, including the js and css in use:

System check identified no issues (0 silenced).
October 11, 2015 - 20:51:06
Django version 1.8.5, using settings 'project.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CONTROL-C.
[11/Oct/2015 20:51:14] "GET / HTTP/1.1" 302 0
[11/Oct/2015 20:51:14] "GET /conf HTTP/1.1" 301 0
[11/Oct/2015 20:51:14] "GET /conf/ HTTP/1.1" 200 9041
[11/Oct/2015 20:51:14] "GET /static/conf/css/bootstrap.css HTTP/1.1" 304 0
[11/Oct/2015 20:51:14] "GET /static/conf/img/logo.jpg HTTP/1.1" 304 0
[11/Oct/2015 20:51:15] "GET /static/conf/js/jquery-1.11.2.min.js HTTP/1.1" 304 0

推荐答案

我已经尝试了您的html代码w3schools实时编辑器，折叠功能正常。

I've tried your html code w3schools live editor and collapsing works properly.

因此，在您的情况下，其他一些js代码可能不会阻止单击元素时发生默认事件处理，因为引导程序本身会这样做：

So in your case problem could be with some other js-code that doesn't prevent default event handling when clicking on element, because bootstrap itself does it:

https：/ /github.com/twbs/bootstrap/blob/master/js/collapse.js#L202

因此请检查其他js文件和浏览器控制台是否包含任何可能导致引导程序无法处理崩溃功能的错误。

So check other js files and your browser console for any errors that could prevent bootstrap to handle collapsing functionality.

这篇关于Django中的Bootstrap崩溃问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！