Question

我正在尝试向我的简单网页添加一个按钮，该按钮将展开以在展开时显示超链接列表。我决定解决这个问题，我将使用bootstrap但是我无法让它工作，我的同事也找不到问题。该按钮与引导程序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;
}

相关屏幕：
- 在我的网站上显示（蓝色按钮）：

我希望这只是我错过的一些简单但我一直在寻找并试图永无止境！大家提前干杯！

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>

Bootstrap崩溃 - 没有功能？

2 个答案: