Question

我的Bootstrap下拉列表有问题。单击按钮时，菜单不显示。

我知道这个问题之前已被问过很多次了，我在Youtube上看了一些有关如何制作这些问题的教程，但没有任何作用。

我尝试了许多版本的Jquery和bootstrap js，我将脚本移到了代码的底部，我添加了这段代码：

$(document).ready(function() {
    $(".dropdown-toggle").dropdown();
});

这就是我现在所拥有的：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    
    <!-- link javascript -->
    <script src="http://www.ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <script src="../js/dropdown.js"></script>
    
    <!-- link CSS -->
    <link href="../css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="../css/style.css" rel="stylesheet" type="text/css">
</head>
<body>

 <!-- other stuff on my page -->
  
<!-- ADMIN TOOLS --> 
    <div class="adminToolsContainer">
        <!-- dropdown -->
        <div class="dropdown">
            <!-- Drowdown button -->
            <button class="btn btn-default drowdown-toggle" type="button" data-toggle="dropdown">
                <!-- Button title and arrow -->
                Admin tools <span class="caret"></span>
                
                <!-- Dropdown content -->
                <ul class="dropdown-menu">
                    <li class="dropdown-header">Blog</li>
                    <li><a href="#">Post lijst</a></li>
                    <li><a href="#">Maak post</a></li>
                    <li class="divider"></li>
                    <li class="dropdown-header">Accounts</li>
                    <li><a href="#">Gebruikerslijst</a></li>
                    <li><a href="#">Gebruiker toevoegen</a></li>
                </ul>
            </button>    
        </div>
    </div>
<!-- END OF ADMIN TOOLS -->
</body>

我希望有人知道解决方案。我不知道为什么但是当我必须链接Jquery和bootstrap javascript时我总是遇到麻烦。

感谢您的帮助。

Answer 1

将componentDidMount(){ document.body.style.backgroundColor = "red"// Set the style document.body.className="body-component-a" // Or set the class }移出按钮

.dropdown-menu

Answer 2

我知道这个问题已经很老了，但问题仍然存在。这是我的解决方案：

确保按正确的顺序包含jquery，popper.js和bootstrap脚本。这就是我所做的。我切换了bootstrap.com上提到的顺序，先加载jQuery和popper.js，然后再加载bootstrap.css

类似

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="...." crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="..." crossorigin="anonymous"></script>

然后

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-...." crossorigin="anonymous">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-..." crossorigin="anonymous"></script>

Bootstrap下拉单击不起作用

2 个答案: