- 締切済み
iPhoneでのナビゲーションバーの挙動について
Twitter Bootstrap(version2.2.2)を使いホームページの作成をしようとしています。プログレッシブデザインにしてPCとスマホで表示させたいです。 ナビゲーションバーでドロップダウンメニューを使いたいのですが、PCでは思うどうりに、ドロップダウンメニューのリンクがクリックできるのですが、iPhone(iOS6.0.2)ではクリックしようとするとドロップダウンではなく（そのメニューは消え）表示上ではその下のナビゲーションバー自体をクリックしてしまいます。どのように改善したら良いのでしょうか？ HTMLは以下のようなものです。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>TEST SITE</title> <link href="./css/bootstrap.min.css" rel="stylesheet"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="./css/bootstrap-responsive.css" rel="stylesheet"> </head> <body style="padding-top:20px"> <div class="container"> <div class="navbar"> <div class="navbar-inner"> <ul class="nav"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> NAVIGATION-BAR01 <span class="caret"></span> </a> <ul class="dropdown-menu"> <li><a href="http://www.example.com/">DROP1-1</a></li> <li><a href="http://www.example.com/">DROP1-2</a></li> <li class="divider"></li> <li><a href="http://www.example.com/">DROP1-3</a></li> <li><a href="http://www.example.com/">DROP1-4</a></li> </ul> </li> </ul> <ul class="nav"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> NAVIGATION-BAR02 <span class="caret"></span> </a> <ul class="dropdown-menu"> <li><a href="http://www.example.com/">DROP2-1</a></li> <li><a href="http://www.example.com/">DROP2-2</a></li> <li class="divider"></li> <li><a href="http://www.example.com/">DROP2-3</a></li> <li><a href="http://www.example.com/">DROP2-4</a></li> </ul> </li> </ul> </div> </div> </div> <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> <script src="./js/bootstrap.min.js"></script> </body> </html>
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
なぜそのような複雑なHTMLになるのでしょう。 単純に <nav> <ol> <li><a href=""></a></li> <li><a href=""></a> <ol> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> </ol> </li> 略 で良いです。
お礼
回答有難う御座いました。 自分ではどうしてもBootstrapを使いたいために回答してくださった仕方ではサイトの目的を達成できないため（これは自分の実力がないせいでもありますが）残念ですが利用いたしませんでした。 質問した後に自力で検索を続けたら下のサイトで古いBootstrapのバージョン(2.1.0)ながら解決の方法があり（Bootstrapのバグのようでした）、最新のBootstrapのJavascriptと見比べ修正したら思うような動作になりました。 同じ様なことで困っている方がいらっしゃったら参考にしてください。 https://github.com/twitter/bootstrap/issues/4756 このコメントの tkawa さんの回答で解決できました。