jQuery,引导程序下拉列表问题

jQuery, issue with bootstrap dropdown

本文关键字:问题 下拉列表 引导程序 jQuery      更新时间:2023-09-26

我正在尝试构建一个动态下拉菜单http://labs.abeautifulsite.net/jquery-dropdown/

所以我的代码是:

<html>
    <head>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
    </head>
<body>
<p>
        <a href="#" data-dropdown="#dropdown-1">Here’s a link</a>
        and here’s a button <input type="button" value="Dropdown" data-dropdown="#dropdown-1" class="">
        and here’s a <span class="example" data-dropdown="#dropdown-1">span</span>
    </p>
<div id="dropdown-1" class="dropdown dropdown-tip" style="display: block; left: 204.671875px; top: 1373.265625px;">
        <ul class="dropdown-menu">
            <li><a href="#1">Item 1</a></li>
            <li><a href="#2">Item 2</a></li>
            <li><a href="#3">Item 3</a></li>
            <li class="dropdown-divider"></li>
            <li><a href="#4">Item 4</a></li>
            <li><a href="#5">Item 5</a></li>
            <li><a href="#5">Item 6</a></li>
        </ul>
    </div>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>

但什么都没发生,我真的不明白为什么。

下载项目文件并将其包含在项目中。包含文件的顺序很重要:

<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link type="text/css" rel="stylesheet" href="jquery.dropdown.css" />
<script type="text/javascript" src="jquery.dropdown.js"></script>