Bootstrap 3:下拉菜单不工作与.js和引导文件链接

Bootstrap 3: Dropdown menu not working with .js and bootstraps files linked

本文关键字：文件 链接 js 下拉菜单 工作 Bootstrap      更新时间：2023-09-26

我一直在阅读关于这个问题的一些问题。然后我检查了.js .css和bootstrap文件，我链接到我的脚本，使下拉菜单工作，但它只是不工作。

我的导航是这样的:

<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
                <a class="navbar-brand" href="{{ path('homepage') }}">
                    <img id="logo" src="/images/logotipo.png">
                </a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                        <span class="glyphicon glyphicon-globe" aria-hidden="true"></span> 
                        <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Acción #1</a></li>
                        <li><a href="#">Acción #2</a></li>
                        <li><a href="#">Acción #3</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Acción #4</a></li>
                    </ul>
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li>
                    <a href="{{ path('signup_player') }}">
                        <span class="glyphicon glyphicon-user"</span>
                        Sign Up
                    </a>
                </li>
                <li>
                    <a href="{{ path('login_route') }}">
                        <span class="glyphicon glyphicon-log-in"></span>
                        Login
                    </a>
                </li>
            </ul>
        </div><!--/.navbar-collapse -->
    </div>
</nav>

我看起来是这样的，我想我已经有了所有需要的东西:

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title> Squash Connection - Homepage </title>
    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
                                <link rel="stylesheet" href="/css/522ed01_part_1_bootstrap-social_1.css" />
                        <link rel="stylesheet" href="/css/522ed01_part_1_bootstrap-theme_2.css" />
                        <link rel="stylesheet" href="/css/522ed01_part_1_bootstrap-theme.min_3.css" />
                        <link rel="stylesheet" href="/css/522ed01_part_1_bootstrap_4.css" />
                        <link rel="stylesheet" href="/css/522ed01_part_1_bootstrap.min_5.css" />
                        <link rel="stylesheet" href="/css/522ed01_part_1_font-awesome_6.css" />
                        <link rel="stylesheet" href="/css/522ed01_part_1_font-awesome.min_7.css" />
                        <link rel="stylesheet" href="/css/522ed01_part_1_jumbotron_8.css" />
</head>

在脚本的末尾，我插入了标签来添加.js文件。

<script src="/js/dd00e43_jquery_1.js"></script>
<script src="/js/dd00e43_bootstrap.min_2.js"></script>
<script src="/js/dd00e43_part_3_bootstrap_1.js"></script>

这是我如何用symfony和twig源我的。js，。css和bootstrap文件:

Stylesheets compiled with Assetic
    {% block stylesheets %}
        {% stylesheets 'css/*.css' filter='cssrewrite' %}
            <link rel="stylesheet" href="{{ asset_url }}" />
        {% endstylesheets %}
    {% endblock %}

包含Javascripts with Assetic

    {% block javascripts %}
        {% javascripts
            'js/jquery.js'
            'js/bootstrap.min.js'
            'js/*.js'
        %}
            <script src="{{ asset_url }}"></script>
        {% endjavascripts %}    
    {% endblock %}

对我来说一切看起来都是对的，但我不知道为什么当页面加载时，我点击下拉菜单，它只是不显示到其他页面的链接。

有没有人知道为什么这可能会发生，或者如果我错过了什么，我没有注意到?

谢谢。

当我在JSBin中使用cdn复制它时，它对我来说工作得很好，链接如下。(调整视图屏幕大小以测试移动/桌面版本)

http://jsbin.com/yameludede/edit?html、css、输出

我会检查你从哪里获得jQuery和Bootstrap。试试cdn:

<script src="https://code.jquery.com/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

相关文章：