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>

你可以看到，當你運行它，你得到的是展開的下拉列表坐在頁面上。沒有按鈕，沒有活動等。我是唯一一個看到這種行爲的人嗎？爲什麼不按預期工作？

來源

2016-04-07 gilbertpilz

我假設，因爲他們展示它的外觀，而不是功能的顯示頁面上正在使用的代碼。從<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>

來源

2016-04-07 20:00:25 Hoopson2

謝謝。這工作。我認爲他們需要評論這些例子，以表明它們是「僅用於顯示」而不是實際的工作代碼。 – gilbertpilz

您的示例與頁面上顯示的完全相同:)在導航欄示例中，它們還顯示工作下拉列表（是的，它們位於導航欄中，但沒有多大區別）。 – mjohnsonengr

-1

我已經試過這個標記，並工作。

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

來源

2016-04-07 19:40:04 cesare

是你的權利。試試這個小提琴我糾正了答案。 – 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>

來源

2016-04-07 19:57:09 mjohnsonengr

現在出現按鈕，但菜單仍然卡在屏幕上。順便說一句 - 'sr-only'屬性在Bootstrap示例代碼中。 – gilbertpilz

Bootstrap主題下拉菜單失敗

回答

相關問題