Question

下拉按钮的Bootstrap UI工作正常。但点击下拉菜单无法打开。我不知道是什么问题。每当我使用来自w3schools的代码时它都可以工作，但这不起作用。它与w3schools代码完全相同。

<!DOCTYPE html>
<html>
<head>
 <title>Bootstrap Example</title>
 <meta name="viewport" content="width=device-width, initial-scale=1">

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

 <!-- Latest compiled and minified JavaScript -->
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

</head>
<body>

<div class="container">
 <h1>Heading without the Jumbotron</h1>
  <div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
  <span class="caret"></span></button>
  <ul class="dropdown-menu">
   <li><a href="#">HTML</a></li>
   <li><a href="#">CSS</a></li>
   <li><a href="#">JavaScript</a></li>
  </ul>
 </div>
</div>
</body>
</html>

<！/ P>

Answer 1

这就是它的完成方式。我将添加一个jsfiddle：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("a[role='menuitem").click(function () {
                $(".dropdown-toggle").text($(this).text());
                $(".dropdown-toggle").css("color", "white");
            })
            $("[data-addRole='nopresentation").click(function () {
                $(".dropdown-toggle").css("color", "grey");
            })
        })
    </script>
</head>
<body>
    <nav class="navbar navbar-inverse">
        <div class="container-fluid">
            <div class="navbar-header">
                @*added data-addrole*@
                <a data-addrole="nopresentation" class="navbar-brand" href="#">WebSiteName</a>
            </div>
            <ul class="nav navbar-nav">
                @*added data-addrole*@
                <li data-addrole="nopresentation"><a href="#">Home</a></li>
                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">HasDropdowns<span class="caret"></span></a>
                    <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
                        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">HTML</a></li>
                        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">CSS</a></li>
                        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">JavaScript</a></li>
                        <li role="presentation" class="divider"></li>
                        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">About Us</a></li>
                    </ul>
                </li>
                @*added data-addrole*@
                <li data-addrole="nopresentation"><a href="#">NoDropdown 2</a></li>
                <li data-addrole="nopresentation"><a href="#">NoDropDown 3</a></li>
            </ul>
        </div>
    </nav>
</body>
</html>

bootstrap下拉UI工作但下拉菜单不工作

1 个答案: