Question

附上我用于构建个人网站的index.html的代码。我正在尝试使用bootstrap，并且不太了解它是如何工作的。我遇到了一个问题，经过多次研究，我无法解决，因此我在这里发布。我正在使用带有链接和下拉列表的引导导航栏，链接可以正常工作，但是当点击它们时，下拉列表不会打开，它们显然不会响应。奇怪的是他们在工作，但不知怎的，我已经做了一些事情，现在他们没有。任何指导都会非常有用。我做错了什么？

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Ryan Pace Sloan</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script>
    $('.dropdown-toggle').dropdown()
</script>
<style>
    body{
        background: #0000ff url('blue-texture-circle.jpg') no-repeat top left;

    }
    #name{
        color: whitesmoke;
        font-size: 65px;
        margin-left: 25px;
    }
    #starImg{
        color: gold; /*#ccddff;*/
        font-size: 45px;
    }
    #imgDiv{
        border-radius: 100%;
        background-color: lightblue;
        height: 300px;
        width: 350px;
        margin-top: 77px;
        margin-left: 777px;
        border: 2px solid cadetblue;

    }
    #imgDiv img {
        border-radius: 100%;
        height: 280px;
        width: 330px;
        margin: 7px 7px 10px 10px;
        padding: 0px;
    }
    #goldA{
        color: gold;
        margin-top: 70px;
        margin-left: 555px;

    }
</style>
</head>
<body>
<header>
<nav class="navbar navbar-inverse" role="navigation">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <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="#"><strong id="starImg">&ast;</strong></a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse bs-example-js-navbar-collapse" id="collapseNavBar">
            <ul class="nav navbar-nav">
                <li class="active"><a href="https://github.com/ryanpsloan" target="_blank">>
                    GitHub<span class="sr-only">(current)</span></a></li>
                <li><a href="https://www.linkedin.com/profile/view?id=85723107&trk=spm_pic" target="_blank">>
                    LinkedIn</a></li>
                <li><a href="resume.html">>Resume</a></li>
                <li><a href="location.php">>Location</a></li>
                <li><a href="webGL.html" target="_blank">>WebGL &starf;</a></li>
                <li class="dropdown">
                    <a id="portfolio" href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                        aria-haspopup="true" aria-expanded="false">
                        Web Dev Portfolio <span class="caret"></span></a>
                    <ul class="dropdown-menu" role="menu" aria-labelledby="portfolio">
                        <li role="presentation"><a role="menuitem" tabindex ="-1"
                                                            href="http://www.easyconversiontools.com">Easy Conversion
                                                                                                        Tools</a></li>
                        <li role="presentation" class="divider"></li>
                        <li role="presentation"><a role="menuitem"
                                                            tabindex="-1" href="http://www.unitydictionary.info">Unity
                                                                                    Turkish English Dictionary</a></li>
                        <li role="presentation" class="divider"></li>
                        <li role="presentation"><a role="menuitem" tabindex="-1" href="http://www.przm-air.com">PRZM
                            Air</a></li>
                    </ul>
                </li>
            </ul>

            <ul class="nav navbar-nav navbar-right">
                <li><a href="contact.php">>Contact</a></li>
                <li class="dropdown">
                    <a id="tweetDrop" href="#" class="dropdown-toggle" data-toggle="dropdown"
                        aria-haspopup="true" role="button"
                        aria-expanded="false">Tweets @ryanpacesloan <span class="caret"></span>   </a>
                    <ul class="dropdown-menu" role="menu" aria-labelledby="tweetDrop">
                        <li role="presentation"><a role="menuitem" tabindex="-1" class="twitter-timeline"
                                                            href="https://twitter.com/ryanpacesloan"
                                                            data-widget-id="536299887302701056"></a>
                            <script>
                                !function(d,s,id){
                                    var js,
                                        fjs=d.getElementsByTagName(s)[0],
                                        p=/^http:/.test(d.location)?'http':'https';
                                    if(!d.getElementById(id))
                                    {
                                        js=d.createElement(s);
                                        js.id=id;
                                        js.src=p+"://platform.twitter.com/widgets.js";
                                        fjs.parentNode.insertBefore(js,fjs);
                                    }
                                }
                                (document,"script","twitter-wjs");
                            </script>
                        </li>
                    </ul>
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>
<h1 id="name">Ryan Pace Sloan</h1>
</header>
<div id="centerDiv">
<div id="imgDiv">
    <img src="ryanpace.jpg">
</div>
</div>
<footer>
<div id="goldA">
    &copy; Gold Asterisk 2014
</div>
</footer>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Answer 1

请务必指向jquery js文件。因为，bootstrap需要jquery。在bootstrap js。

之前添加

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Bootstrap下拉列表不会响应

1 个答案: