Question

我使用Python Django来实现Web服务器和后端，并使用bootstrap来构建前端。我的网站是关于一个研究小组的。

在bootstrap中，有一个自定义按钮，允许单击以显示和隐藏另一个元素，其源代码如下所示：

<a class="btn btn-primary" role="button" data-toggle="collapse" 
   href="#collapseExample" aria-expanded="false" aria-
   controls="collapseExample">
   Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" 
   data-target="#collapseExample" aria-expanded="false" aria-
   controls="collapseExample">
   Button with data-target
</button>
<div class="collapse" id="collapseExample">
  <div class="well">
  ...
  </div>
</div>

我使用此按钮显示出版物的摘要，其数据来自models.py:

class Publication(models.Model):
    title = models.CharField(max_length=60, default='Title')
    first_author = models.CharField(max_length=60, default='Authors')
    cooperative_author = models.CharField(max_length=120,                          
                            default='Authors')
    abstract = models.TextField(null=True)
    published_time = models.DateTimeField(auto_now=0)
    tag = models.CharField(max_length=60, default='Tag')
    pub_url = models.CharField(max_length=120, default='pub_url')

我的view.py中的代码是：

def research_accomplishment(request):
    publications = models.Publication.objects.all()
    return render(request, 'research_spacecoupe/research_accomplishment.html', {'publications': publications} )

HTML中的代码是：

{% for publication in publications %}
<h2 class="blog-post-title">{{ publication.title }}</h2>
        <p class="blog-post-meta">{{ publication.published_time }} by 
<a href="#">{{ publication.first_author }}, {{ 
publication.cooperative_author }}</a></p>
            <a class="btn btn-primary" role="button"  href="{{ 
publication.pub_url }}" aria-expanded="false" aria-
controls="collapseExample" target="_blank">
          Download
        </a>
        <button class="btn btn-primary" type="button" data-
toggle="collapse" data-target="#{{ publication.tag }}" aria-
expanded="false" aria-controls="#{{ publication.tag }}">
          Abstract
        </button>

        <div class="collapse" id="{{ publication.tag }}">

          <div class="well">
             {{ publication.abstract }}
          </div>
        </div>

结果是我可以看到已经使用inspect元素工具选择了数据，但是我无法单击Abstract按钮来显示内容。

问题的解决方案

问题在inspect元素工具控制台中显示出来。在原始代码中，我在publication.tag数据中键入“/”，这对于用作div =“collapse”的div的id是无效的，因此该函数不起作用。注意命名语法。

Django Bootstrap前端预览按钮效果不起作用

0 个答案: