Django Bootstrap下拉列表不起作用

问题描述：

我正在建立基于django的网站.我在导航栏中使用引导程序下拉菜单，以在低分辨率(即移动视图)上折叠导航栏，但是在单击按钮导航栏时不会下拉菜单.

I am building website based in django. I am using bootstrap dropdown in navbar to collapse navbar on low resolution i.e. mobile view, but on clicking button navbar not getting dropdown.

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

据我所知，

答

bootstrap使用其自己的 javascript 库来进行诸如折叠之类的动画处理.因此，您还需要导入其 js 文件.将此行放在您的第一个< script> 标记

as far as I know bootstrap uses its own javascript library for doing animated stuff like collapsing and so on. so you need to import their js file as well. put this line below your first <script> tag

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

请注意，因为bootstrap js库使用 jquery ，所以您必须在导入jquery的下方这一行.否则它将无法正常工作.

note that because bootstrap js library uses jquery, you must put this line below importing jquery. otherwise it won't work.

Django Bootstrap下拉列表不起作用

相关推荐