Zurb Foundation 4.3.2 でセクションを実装しようとしています。正しい 2 つの js ファイルと css ファイルを含め、js スクリプトで Foundation を初期化するようにしましたが、このセクションでは引き続きすべてのコンテンツとボタンが一緒に折りたたまれています。最初のセクション/タブも表示されません。
編集:ここに JS Fiddle があります: http://jsfiddle.net/ethanova/R2SdH/ (私の最初なので、何らかの最悪の練習を行った場合はお知らせください)
JSFiddle を作成した後、小さな dpi 画面で正しく動作していることに気付きました (タブをクリックしても機能しない場合でも、JSFiddle が提供する小さな領域では問題ないように見えます)。実際のコードで確認し、ブラウザー ウィンドウを小さくすると、セクションをアコーディオンにするとうまくいきます)。そのため、タブに戻るときは、セクションが折りたたまれて機能しないときの大きな画面サイズにのみあるようです。
何がうまくいかないかについてのアイデアはありますか?みんなありがとう。
<!-- foundation zurb -->
<link rel="stylesheet" href="./css/foundation.min.css">
<link rel="stylesheet" href="./css/normalize.css">
<!-- JAVASCRIPT -->
<script src='../../js/vendor/jquery.js'></script>
<!-- zurb foundation -->
<script src="../../js/foundation.min.js"></script>
<script src="../../js/vendor/custom.modernizr.js"></script>
<script>
$(document).foundation();
</script>
</head>
<body>
<div class='row'>
<div class='small-12 columns'>
123 Street Name <br /> City, ST Zip <br />
</div>
</div>
<div class='row'>
<div class='large-8 columns'>
<div class="section-container auto" data-section data-section-resized>
<section class="active">
<p class="title" data-section-title><a href="#panel1">Details</a></p>
<div class="content" data-section-content>
<p>Things like Comments, Area, Use Type, Current Use, Sqft, Taxes, Value, Status</p>
</div>
</section>
<section>
<p class="title" data-section-title><a href="#panel2">Improvements</a></p>
<div class="content" data-section-content>
<p>Any improvements data</p>
</div>
</section>
<section>
<p class="title" data-section-title><a href="#panel3">Mortgage</a></p>
<div class="content" data-section-content>
<p>Mortage data.</p>
</div>
</section>
<section>
<p class="title" data-section-title><a href="#panel4">Lease</a></p>
<div class="content" data-section-content>
<p>Lease data.</p>
</div>
</section>
<section>
<p class="title" data-section-title><a href="#panel5">Lien</a></p>
<div class="content" data-section-content>
<p>Lien data.</p>
</div>
</section>
</div>
</div>
<div class='large-4 columns'>
Map Goes Here
</div>
</div>
<div class='row'>
<div class='large-12 columns'>
Related people
</div>
</div>
<div class='row'>
<div class='large-12 columns'>
Related properties
</div>
</div>