ブートストラップテーマドロップダウンメニューが表示されない

jQueryとBootstrapを使用して簡単なアプリケーションを構築しようとしています。ドロップダウンメニューを追加するのに問題があります。私はhttp://getbootstrap.com/examples/theme/のサンプルコードを使用しようとしていますが、動作しないように見えません。あなたはこれを実行すると、あなたが得るすべてのページの上に座って拡大ドロップダウンリストで、ことがわかりますブートストラップテーマドロップダウンメニューが表示されない

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

コードは、彼らはそれが代わりに機能をどのように見えるかを示していた表示ページ上で使用されていたので、私は想定しています。 "theme-dropdown clearfix"を<div class="dropdown theme-dropdown clearfix">から削除し、<a>タグの "sr-only"を削除すると、今すぐコードとして機能します。

ボタンを使用しているw3schoolの例もあり、簡単に行くことができます。 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

あなたの例は、ページに表示されているとおりに動作します:) navbarの例では、作業中のドロップダウンも表示されます（はい、ナビゲーションバーにありますが、それほど大きな違いはありません）。 – 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

ボタンが表示されますが、メニューはまだ画面に止まっています。 BTW - 'sr-only'属性はブートストラップのサンプルコードにあります。 – gilbertpilz

ブートストラップテーマドロップダウンメニューが表示されない

答えて

関連する問題