引导崩溃-没有功能？

Question

我试图添加一个按钮到我的简单网页，将展开显示超链接列表时展开。我决定解决这个问题，我将使用引导，但我无法使它工作，我的同事也找不到问题。该按钮与引导CSS、JS和JQuery一起加载(3.1.1)。这是令人讨厌的，因为我在搜索解决方案时发现的几乎每一个修复都是缺少的jquery.min.js文件。

那么，到底发生了什么？

没什么。这就是问题所在，列表中的所有项目都隐藏在按钮中，但是当单击按钮时，网页中没有任何操作或更改。

所以，关于代码和问题本身。

我的相关HTML代码(文件底部的代码部分)：

</div>  
        <div class="containment">   
            <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="collapseExample">Test Click Me</button>
            <div class="collapse" id="collapseExample">
                <ul>
                    <li>Yoyoyoyo</li>
                    <li>hihihihi</li>
                    <li>hellohello</li>
                </ul>
            </div>  
        </div>   
    </body>   
</html>

{% block footer %}
<script language="text/javascript" src="{% static 'QMS/simple-expand.min.js' %}"></script>
<script type="text/javascript" src="{% static 'QMS/jquery-3.1.1.min.js' %}"></script>
<script language="JavaScript" type="text/javascript" src="{% static 'QMS/jscript.js' %}"></script>
<script language="JavaScript" type="text/javascript" src="{% static 'QMS/bootstrap.min.js' %}"></script>
<!-- <script language="JavaScript" type="text/javascript" src="{% static 'QMS/jquery.min.js' %}"></script> -->
{% endblock footer %}

相关CSS代码：

.btn{
    position: absolute;
    top:150px;
    left:200px;
}

相关屏幕：

我的站点上的-Display (蓝色按钮)：

我希望这只是一些简单的东西，我错过了，但我一直在寻找，并试图结束！大家提前欢呼！

Answer 1

您的data-target属性缺少一个#。

<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="collapseExample">Test Click Me</button>

应该是

<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample">Test Click Me</button>

Answer 2

您在#属性中缺少data-target符号。

<button class="btn btn-primary" type="button"
        data-toggle="collapse"
        data-target="#collapseExample">Test Click Me</button>
                     ^^----// Add this id selector and your problem will be fixed

​

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="containment">   
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample">Test Click Me</button>
  <div class="collapse" id="collapseExample">
    <ul>
      <li>Yoyoyoyo</li>
      <li>hihihihi</li>
      <li>hellohello</li>
    </ul>
  </div>  
</div>

​