引导下拉菜单无法正常工作(Bootstrap dropdown menu does not work

2019-10-23 11:42发布

编辑:我已经包括bootstrap.js和bootstrap.min.js和仍然没有工作

你好,我举下拉菜单中不工作我抄了相同的代码,因为它是在w3schools.com但是当我点击它,它不会显示菜单栏选项。

这里是我的代码

<html>
<header lang="en">
    <title>E-Sports News</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="bootstrap.css">
    <link rel="stylesheet" href="style.css">

</header>
<body>
    <div class="container">
        <header class="jumbotron">
            <h1>E-SportsNews.bg</h1>
            <p>Your gaming new in one place</p>
            <nav class="navbar navbar-default">
                <div class="container-fluid">
                    <div>
                        <ul class="nav navbar-nav">
                            <li class="active"><a href="#">Home</a></li>
                            <li class="dropdown">
                                <a class="dropdown-toggle" data-toggle="dropdown" href="#">News
                                <span class="caret"></span></a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">Dota 2</a></li>
                                    <li><a href="#">League of legends</a></li>
                                    <li>><a href="#">Hearthstone</a></li>
                                    <li><a href="#">Heroes of the storm</a></li>
                                    </ul>
                            </li>
                            <li><a href="#">Galery</a></li> 
                            <li><a href="#">Learn to play</a></li> 
                        </ul>
                     </div>
                </div>
            </nav>
        </header>
        <main class="jumbotron">
            <h2>Най-известна новина тази седмица.</h2>
            <article>
                <h2>

                </h2>
            </article>
        </main>
            <section class="col-lg-3">
                <a href="#">Dota 2</a>
                <img src="" alt="">
            </section>
            <section class="col-lg-3">
                <h3>League of Legends</h3>
            </section>
            <section class="col-lg-3">
                <h3>Hearthstone</h3>
            </section>
            <section class="col-lg-3">
                <h3>Heroes of the Storm</h3>
            </section>
    </div>      
</body> 

当您单击新闻下拉按钮,它应该给你选项菜单中选择特定的游戏新闻,但是当你点击它什么都不做。

Answer 1:

在引导插件可以单独包括(使用引导的个体* .js文件),或一次(使用bootstrap.js或缩小的bootstrap.min.js)。

一些插件和CSS组件依赖于其他插件。 如果你有单独的插件,请务必检查在文档这些依赖关系。 另外请注意,所有的插件依赖jQuery的(这意味着jQuery的必须包含插件文件之前)。

尝试这个

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

在这里工作的jsfiddle与您发布的代码。

还检查了http://www.w3schools.com/bootstrap/bootstrap_get_started.asp和http://getbootstrap.com/javascript/



文章来源: Bootstrap dropdown menu does not work