引導下拉菜單UI工作但下拉菜單不起作用

下拉按鈕的引導UI工作正常。但下拉菜單無法打開點擊。我不知道是什麼問題。每當我使用w3schools的代碼時，它都能正常工作，但這不起作用。它與w3schools代碼完全相同。引導下拉菜單UI工作但下拉菜單不起作用

<!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>

！

來源

2017-06-12 User99991235

https://jsfiddle.net/kblau237/uaywdcje/ – kblau

這是如何完成的。我將添加的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>

來源

2017-06-12 21:14:54 kblau

@ User99991235 https://jsfiddle.net/kblau237/uaywdcje/ – kblau

引導下拉菜單UI工作但下拉菜單不起作用

回答

相關問題