Django中的Bootstrap崩溃问题

时间:2015-10-11 16:37:06

标签: python django twitter-bootstrap python-3.x

我试图在Django中使用引导程序页面,遗憾的是列表组项目的崩溃不起作用。

来自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>

点击标题时,&#34;#collapseTwo&#34;信号被发送到浏览器到我的django应用程序而不是折叠列表(例如:127.0.0.1:8000 / conf /#collapseTwo&#34;)。外面django崩溃工作很好。在django内除了崩溃工作之外的其他一切(css,链接,图像等)

django项目中的网址格式:

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')),
]

应用的网址格式称为&#34; conf&#34;:

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

主视图的关键部分:

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内进行崩溃工作?

编辑:渲染页面时来自django服务器的消息,包括正在使用的js和css:

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

2 个答案:

答案 0 :(得分:2)

我已经尝试过您的HTML代码w3schools实时编辑器和折叠工作正常。

因此,在您的情况下,问题可能是其他一些js代码在单击元素时不会阻止默认事件处理,因为bootstrap本身会这样做:

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

请检查其他js文件和浏览器控制台是否存在可能阻止引导程序处理折叠功能的错误。

答案 1 :(得分:1)

根本没有 使用锚标记。只需将<a>标记替换为<span>

即可
...
<span class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
   Header
</span>
...

结果完全相同,但有效防止django在用户打开或关闭可折叠时重定向。要保持光标,即悬停“手”,请添加此CSS:

span[role="button"] {
    cursor: pointer;
}

演示 - &gt;的 http://jsfiddle.net/ae3se1s5/