CakePHPにTwitterBootstrapプラグインを導入し、
リファレンスサイトやフリーテンプレートを参考に以下のレイアウトを作成してみましたが、
サイドバーのcollapse(MENU5~8)が閉じず、困っています。
私のコードの書き方が問題なのか、bootstrap.jsが問題なのかが分からなかったので
こちらに投稿させて頂きました。
bootstrap.jsは最新のものを使用しています。
もしコードにおかしな部分がありましたら、どう直せば良いのかをお教え頂けますでしょうか。
以下、コードです。
lang
1<?php echo $this->BootstrapHtml->doctype('html5'); ?> 2<html lang='ja'> 3<head> 4 <title>Sample</title> 5 <?php 6 echo $this->BootstrapHtml->charset('utf-8'); 7 echo $this->BootstrapHtml->meta(array('http-equiv' => 'X-UA-Compatible', 'content' => 'IE=edge')); 8 echo $this->BootstrapHtml->meta(array('name' => 'viewport', 'content' => 'width=device-width, initial-scale=1')); 9 echo $this->BootstrapHtml->meta(array('name' => 'author', 'content' => '')); 10 echo $this->BootstrapHtml->meta(array('name' => 'copyright', 'content' => '')); 11 ?> 12 <?php echo $this->BootstrapHtml->css(array('bootstrap', 'default')); ?> 13 <style></style> 14 <?php echo $this->BootstrapHtml->css('font-awesome'); ?> 15 <!--[if lt IE 9]> 16 <?php echo $this->BootstrapHtml->script(array('https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js', 'https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js' )); ?> 17 <![endif]--> 18 <?php echo $this->BootstrapHtml->script(array('jquery-1.11.1.min', 'bootstrap')); ?> 19 <script> 20 //<![CDATA[ 21 //]]> 22 </script> 23</head> 24<body> 25 <div id="wrapper"> 26 <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 27 <div class="navbar-header"> 28 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> 29 <span class="sr-only">Toggle navigation</span> 30 <span class="icon-bar"></span> 31 <span class="icon-bar"></span> 32 <span class="icon-bar"></span> 33 </button> 34 <a class="navbar-brand" href="#"><?php echo $this->BootstrapHtml->image('logo.png', array('alt' => 'logo')); ?></a> 35 </div> 36 <div class="collapse navbar-collapse navbar-ex1-collapse"> 37 <ul class="nav navbar-nav side-nav"> 38 <li><a href="#"><i class="fa fa-fw fa-tasks"></i> MENU1</a></li> 39 <li><a href="#"><i class="fa fa-fw fa-tasks"></i> MENU2</a></li> 40 <li><a href="#"><i class="fa fa-fw fa-tasks"></i> MENU3</a></li> 41 <li><a href="#"><i class="fa fa-fw fa-tasks"></i> MENU4</a></li> 42 <li> 43 <a href="javascript:;" data-toggle="collapse" data-target="#menu5"><i class="fa fa-fw fa-tasks"></i> MENU5 <i class="fa fa-fw fa-caret-down"></i></a> 44 <ul id="menu5" class="collapse"> 45 <li><a href="#"><i class="fa fa-fw fa-caret-right"></i> 5-1</a></li> 46 <li><a href="#"><i class="fa fa-fw fa-caret-right"></i> 5-2</a></li> 47 <li><a href="#"><i class="fa fa-fw fa-caret-right"></i> 5-3</a></li> 48 <li><a href="#"><i class="fa fa-fw fa-caret-right"></i> 5-4</a></li> 49 <li><a href="#"><i class="fa fa-fw fa-caret-right"></i> 5-5</a></li> 50 </ul> 51 </li> 52 <li> 53 <a href="javascript:;" data-toggle="collapse" data-target="#menu6"><i class="fa fa-fw fa-tasks"></i> MENU6 <i class="fa fa-fw fa-caret-down"></i></a> 54 <ul id="menu6" class="collapse"> 55 <li><a href="#"><i class="fa fa-fw fa-caret-right"></i> 6-1</a></li> 56 <li><a href="#"><i class="fa fa-fw fa-caret-right"></i> 6-2</a></li> 57 <li><a href="#"><i class="fa fa-fw fa-caret-right"></i> 6-3</a></li> 58 <li><a href="#"><i class="fa fa-fw fa-caret-right"></i> 6-4</a></li> 59 <li><a href="#"><i class="fa fa-fw fa-caret-right"></i> 6-5</a></li> 60 </ul> 61 </li> 62 <li> 63 <a href="javascript:;" data-toggle="collapse" data-target="#menu7"><i class="fa fa-fw fa-tasks"></i> MENU7 <i class="fa fa-fw fa-caret-down"></i></a> 64 <ul id="menu7" class="collapse"> 65 <li><a href="#"><i class="fa fa-fw fa-caret-right"></i> 7-1</a></li> 66 <li><a href="#"><i class="fa fa-fw fa-caret-right"></i> 7-2</a></li> 67 <li><a href="#"><i class="fa fa-fw fa-caret-right"></i> 7-3</a></li> 68 <li><a href="#"><i class="fa fa-fw fa-caret-right"></i> 7-4</a></li> 69 <li><a href="#"><i class="fa fa-fw fa-caret-right"></i> 7-5</a></li> 70 </ul> 71 </li> 72 <li> 73 <a href="javascript:;" data-toggle="collapse" data-target="#menu8"><i class="fa fa-fw fa-tasks"></i> MENU8 <i class="fa fa-fw fa-caret-down"></i></a> 74 <ul id="menu8" class="collapse"> 75 <li><a href="#"><i class="fa fa-fw fa-caret-right"></i> 8-1</a></li> 76 <li><a href="#"><i class="fa fa-fw fa-caret-right"></i> 8-2</a></li> 77 <li><a href="#"><i class="fa fa-fw fa-caret-right"></i> 8-3</a></li> 78 <li><a href="#"><i class="fa fa-fw fa-caret-right"></i> 8-4</a></li> 79 <li><a href="#"><i class="fa fa-fw fa-caret-right"></i> 8-5</a></li> 80 </ul> 81 </li> 82 </ul> 83 </div> 84 </nav> 85 <div id="page-wrapper"> 86 <?php echo $content_for_layout; ?> 87 </div> 88 </div> 89</body> 90</html>
よろしくお願い致します。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2014/10/17 05:44