Bootstrap主题下拉菜单失败

问题描述：

我想用jQuery和Bootstrap构建一个简单的应用程序。我无法添加下拉菜单。我一直在尝试使用http://getbootstrap.com/examples/theme/中的示例代码，但它看起来不像。下面的代码几乎恰好出现在例如方式：Bootstrap主题下拉菜单失败

<!DOCTYPE html> 
 
<html lang="en"> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> 
 

 
    <title>Bootstrap Dropdown Theme Fail</title> 
 

 
    <!-- Bootstrap core CSS --> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> 
 

 
    <!-- Bootstrap theme CSS -->  
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"rel="stylesheet"> 
 

 
    <!-- Custom styles for this template --> 
 
    <link href="http://getbootstrap.com/examples/theme/theme.css" rel="stylesheet"> 
 

 
    <!-- jQuery 2.2.3 --> 
 
    <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script> 
 

 
    <!-- Bootstrap 3.3.6 --> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 
 
    </head> 
 

 
    <body> 
 
    <div class="container"> 
 
     <div class="page-header"> 
 
     <h1>Dropdown menus</h1> 
 
     </div> 
 
     <div class="dropdown theme-dropdown clearfix"> 
 
     <a id="dropdownMenu1" href="#" class="sr-only dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
 
     <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> 
 
      <li class="active"><a href="#">Action</a></li> 
 
      <li><a href="#">Another action</a></li> 
 
      <li><a href="#">Something else here</a></li> 
 
      <li role="separator" class="divider"></li> 
 
      <li><a href="#">Separated link</a></li> 
 
     </ul> 
 
     </div> 
 
    </div> <!-- /container --> 
 
    </body> 
 
</html>

你可以看到，当你运行它，你得到的是展开的下拉列表坐在页面上。没有按钮，没有活动等。我是唯一一个看到这种行为的人吗？为什么不按预期工作？

答

我假设，因为他们展示它的外观，而不是功能的显示页面上正在使用的代码。从<div class="dropdown theme-dropdown clearfix">删除“theme-dropdown clearfix”，并删除<a>标签上的“仅限sr-only”标签，它现在可以像编码一样工作。

在w3schools上还有一个使用按钮的例子，可能会更容易。 w3schools dropdown

<!DOCTYPE html> 
 
<html lang="en"> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> 
 

 
    <title>Bootstrap Dropdown Theme Fail</title> 
 

 
    <!-- Bootstrap core CSS --> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> 
 

 
    <!-- Bootstrap theme CSS -->  
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"rel="stylesheet"> 
 

 
    <!-- Custom styles for this template --> 
 
    <link href="http://getbootstrap.com/examples/theme/theme.css" rel="stylesheet"> 
 

 
    <!-- jQuery 2.2.3 --> 
 
    <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script> 
 

 
    <!-- Bootstrap 3.3.6 --> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
    </head> 
 

 
    <body> 
 
    <div class="container"> 
 
     <div class="page-header"> 
 
     <h1>Dropdown menus</h1> 
 
     </div> 
 
     <div class="dropdown"> 
 
     <a id="dropdownMenu1" href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
 
     <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> 
 
      <li class="active"><a href="#">Action</a></li> 
 
      <li><a href="#">Another action</a></li> 
 
      <li><a href="#">Something else here</a></li> 
 
      <li role="separator" class="divider"></li> 
 
      <li><a href="#">Separated link</a></li> 
 
     </ul> 
 
     </div> 
 
    </div> <!-- /container --> 
 
    </body> 
 
</html>

谢谢。这工作。我认为他们需要评论这些例子，以表明它们是“仅用于显示”而不是实际的工作代码。 – gilbertpilz

您的示例与页面上显示的完全相同:)在导航栏示例中，它们还显示工作下拉列表（是的，它们位于导航栏中，但没有多大区别）。 – mjohnsonengr

答

我已经试过这个标记，并工作。

<div class="dropdown"> 
    <a id="dropdownMenu1" href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> 
    Dropdown trigger 
    <span class="caret"></span> 
    </a> 

    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> 
    <li class="active"><a href="#">Action</a></li> 
     <li><a href="#">Another action</a></li> 
     <li><a href="#">Something else here</a></li> 
     <li role="separator" class="divider"></li> 
     <li><a href="#">Separated link</a></li> 
    </ul> 
</div>

https://jsfiddle.net/gvrrj47z/

是你的权利。试试这个小提琴我纠正了答案。 – cesare

答

你的下拉按钮不会出现，因为它有它的 “SR-只” 类。这意味着它严格适用于屏幕阅读器。

<!DOCTYPE html> 
 
<html lang="en"> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> 
 

 
    <title>Bootstrap Dropdown Theme Fail</title> 
 

 
    <!-- Bootstrap core CSS --> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> 
 

 
    <!-- Bootstrap theme CSS -->  
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"rel="stylesheet"> 
 

 
    <!-- Custom styles for this template --> 
 
    <link href="http://getbootstrap.com/examples/theme/theme.css" rel="stylesheet"> 
 

 
    <!-- jQuery 2.2.3 --> 
 
    <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script> 
 

 
    <!-- Bootstrap 3.3.6 --> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
    </head> 
 

 
    <body> 
 
    <div class="container"> 
 
     <div class="page-header"> 
 
     <h1>Dropdown menus</h1> 
 
     </div> 
 
     <div class="dropdown theme-dropdown clearfix"> 
 
     <a id="dropdownMenu1" href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
 
     <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> 
 
      <li class="active"><a href="#">Action</a></li> 
 
      <li><a href="#">Another action</a></li> 
 
      <li><a href="#">Something else here</a></li> 
 
      <li role="separator" class="divider"></li> 
 
      <li><a href="#">Separated link</a></li> 
 
     </ul> 
 
     </div> 
 
    </div> <!-- /container --> 
 
    </body> 
 
</html>

现在出现按钮，但菜单仍然卡在屏幕上。顺便说一句 - 'sr-only'属性在Bootstrap示例代码中。 – gilbertpilz

Bootstrap主题下拉菜单失败

相关推荐