Bootstrap下拉選擇值不起作用

Question

我有一個簡單的下拉列表，如下所示：

<div class="btn-group">
  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
    Dropdown <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
    <li><a href="#">Choice1</a></li>
    <li><a href="#">Choice2</a></li>
    <li><a href="#">Choice3</a></li>
    <li class="divider"></li>
    <li><a href="#">Choice..</a></li>
  </ul>
</div>

和JavaScript，用於選擇以下選項之一：

$(".dropdown-menu li a").click(function(){

  $(".btn:first-child").html($(this).text()+' <span class="caret"></span>');

});

我的下拉菜單不起作用，從下拉菜單中選擇的選項沒有被選擇，實際上，當我嘗試在chrome中調試時，實際上我的script.js文件甚至沒有出現在源代碼中。

我像這樣在HTML文件的頂部初始化腳本文件

<script type="text/javascript" src="source/script.js"></script>

我究竟做錯了什么 ？

Answer 1

准備好文檔后，您需要運行代碼：

從jQuery ：

$( document ).ready(function() {

要么

$(function() {

如果在文檔准備好之前運行代碼，則代碼將無法工作，因為$（“。dropdown-menu li a”）之類的元素尚未包含在文檔中。

因此，准備好將代碼包裝在文檔中。

     $(function () {
        $(".dropdown-menu li a").click(function(){

            $(".btn:first-child").html($(this).text()+' <span class="caret"></span>');

        });
    });

Answer 2

您的代碼似乎沒有問題（我在這里有一個有效的示例https://jsfiddle.net/xzfq7q5t/ ），但是腳本標記的路徑可能是錯誤的。

您的文件結構是什么樣的？ 換句話說，您的script.js文件相對於html頁面位於何處？ 它在同一個文件夾中嗎？ 它在“源”文件夾中嗎？

<script type="text/javascript" src="source/script.js"></script>

上面說的是，轉到我當前的文件夾，然后轉到源文件夾，然后查找script.js