サイドバーのcollapseが閉じない(Cakephp/TwitterBootstrapプラグイン)

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件

ベストアンサー

こちらの環境で「php echo」を削除して、 bootstrap3.2で試したところ動きます。
またnavbar の場合はメニュー部分はdropdownにするのが一般的かと思いメニューを１つ追加しています

追記です
ソースコードには「navbarで使っているcollapse」と「メニューで使っているcollapse」が出てきますが、用途が違うので注意が必要です。
navbarのcollapseはレスポンシブデザイン対応のためのもので、ブラウザの幅を狭くすると、メニューがハンバーガーアイコンになるものです。
一方、メニューで使っているcollapseは折り畳み機能を提供する通常のJavascriptコンポーネントです。

lang
1<html lang='ja'>
2<head>
3    <title>Sample</title>
4<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
5<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
6<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
7<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
8    <style></style>
9    <script>
10        //<![CDATA[
11        //]]>
12    </script>
13</head>
14<body>
15    <div id="wrapper">
16        <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
17            <div class="navbar-header">
18                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
19                    <span class="sr-only">Toggle navigation</span>
20                    <span class="icon-bar"></span>
21                    <span class="icon-bar"></span>
22                    <span class="icon-bar"></span>
23                </button>
24                <a class="navbar-brand" href="#"></a>
25            </div>
26            <div class="collapse navbar-collapse navbar-ex1-collapse">
27                <ul class="nav navbar-nav side-nav">
28                    <li><a href="#"><i class="fa fa-fw fa-tasks"></i> MENU1</a></li>
29                    <li><a href="#"><i class="fa fa-fw fa-tasks"></i> MENU2</a></li>
30                    <li><a href="#"><i class="fa fa-fw fa-tasks"></i> MENU3</a></li>
31                    <li><a href="#"><i class="fa fa-fw fa-tasks"></i> MENU4</a></li>
32                    <li>
33                        <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>
34                        <ul id="menu5" class="collapse">
35                            <li><a href="#"><i class="fa fa-fw fa-caret-right"></i> 5-1</a></li>
36                            <li><a href="#"><i class="fa fa-fw fa-caret-right"></i> 5-2</a></li>
37                            <li><a href="#"><i class="fa fa-fw fa-caret-right"></i> 5-3</a></li>
38                            <li><a href="#"><i class="fa fa-fw fa-caret-right"></i> 5-4</a></li>
39                            <li><a href="#"><i class="fa fa-fw fa-caret-right"></i> 5-5</a></li>
40                        </ul>
41                    </li>
42                    <li>
43                        <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>
44                        <ul id="menu6" class="collapse">
45                            <li><a href="#"><i class="fa fa-fw fa-caret-right"></i> 6-1</a></li>
46                            <li><a href="#"><i class="fa fa-fw fa-caret-right"></i> 6-2</a></li>
47                            <li><a href="#"><i class="fa fa-fw fa-caret-right"></i> 6-3</a></li>
48                            <li><a href="#"><i class="fa fa-fw fa-caret-right"></i> 6-4</a></li>
49                            <li><a href="#"><i class="fa fa-fw fa-caret-right"></i> 6-5</a></li>
50                        </ul>
51                    </li>
52                    <li>
53                        <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>
54                        <ul id="menu7" class="collapse">
55                            <li><a href="#"><i class="fa fa-fw fa-caret-right"></i> 7-1</a></li>
56                            <li><a href="#"><i class="fa fa-fw fa-caret-right"></i> 7-2</a></li>
57                            <li><a href="#"><i class="fa fa-fw fa-caret-right"></i> 7-3</a></li>
58                            <li><a href="#"><i class="fa fa-fw fa-caret-right"></i> 7-4</a></li>
59                            <li><a href="#"><i class="fa fa-fw fa-caret-right"></i> 7-5</a></li>
60                        </ul>
61                    </li>
62                    <li>
63                        <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>
64                        <ul id="menu8" class="collapse">
65                            <li><a href="#"><i class="fa fa-fw fa-caret-right"></i> 8-1</a></li>
66                            <li><a href="#"><i class="fa fa-fw fa-caret-right"></i> 8-2</a></li>
67                            <li><a href="#"><i class="fa fa-fw fa-caret-right"></i> 8-3</a></li>
68                            <li><a href="#"><i class="fa fa-fw fa-caret-right"></i> 8-4</a></li>
69                            <li><a href="#"><i class="fa fa-fw fa-caret-right"></i> 8-5</a></li>
70                        </ul>
71                    </li>
72
73                    <!-- 追加 -->
74                    <li class="dropdown">
75                      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
76                      <ul class="dropdown-menu" role="menu">
77                        <li><a href="#">Action</a></li>
78                        <li><a href="#">Another action</a></li>
79                        <li><a href="#">Something else here</a></li>
80                        <li class="divider"></li>
81                        <li><a href="#">Separated link</a></li>
82                      </ul>
83                    </li>
84                    <!-- 追加終わり -->
85
86                </ul>
87
88            </div>
89        </nav>
90        <div id="page-wrapper">
91
92        </div>
93    </div>
94</body>
95</html>