Django Bootstrap下拉列表不起作用

Question

我正在建立基於django的網站。 我在導航欄中使用引導程序下拉菜單以低分辨率（即移動視圖）折疊導航欄，但是單擊按鈕導航欄時不會下拉菜單。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

<nav id="main-menu" class="navbar" role="navigation">
        <div class="navbar-header">
            <button type="button" class="btn btn-navbar navbar-toggle" data-toggle="collapse"
                    data-target=".navbar-cat-collapse">
                <span class="sr-only">Toggle Navigation</span>
                <i class="fa fa-bars"></i>
            </button>
        </div>
        <div class="collapse navbar-collapse navbar-cat-collapse">
            <ul class="nav navbar-nav">
                <li><a href="{% url 'home_page' %}">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Pages</a></li>
                <li><a href="{% url 'contact_page' %}">Contact Us</a></li>
            </ul>
        </div>
    </nav>

Answer 1

據我所知，bootstrap使用它自己的javascript庫來做諸如折疊之類的動畫內容。 因此，您還需要導入其js文件。 將此行放在您的第一個<script>標簽下面

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

請注意，由於bootstrap js庫使用jquery ，因此必須將這一行放在導入jquery的下面 。 否則它將無法正常工作。