0

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

1 に答える 1

0

もう少しテストした後、私はそれを理解しました。セクションページからソースコードをダウンロードし、コードを挿入して動作させようとしました。そもそも私がここに来た理由は、私のセクションがある時点で消え、別のスタックオーバーフローの回答がセクションコンテナdivに「data-section-resized」を追加するだけだったからです。まあ、しないでください。それはそれを非表示に戻しました。私はヘッダーから js をいくつか削除して、より正確に一致させようとしましたが、それは間違いでした。これは私のセクションとヘッダーが今のように見えるものです:

ヘッダ：

    <!-- foundation zurb -->
    <link rel="stylesheet" href="../../css/foundation.min.css">
    <link rel="stylesheet" href="../../css/normalize.css">
    <link rel="stylesheet" href="../../css/general_foundicons.css">
    <!-- zurb foundation -->
    <script src="../../js/foundation/foundation.js"></script>
    <script src="../../js/foundation/foundation.section.js"></script>
    <script src="../../js/vendor/custom.modernizr.js"></script>

おそらく、foundation.min.js には他のすべての同様のセクションが含まれています。foundation.jsとfoundation.section.jsをfoundation.min.jsに置き換えようとしてもうまくいかないことを確認できます。section.jsを残してfoundation.jsをfoundation.min.jsに変更すると動かなくなります。foundation.js とfoundation.section.js が必要です。

セクション：

<div class='row'>
<div class='large-8 columns'>
    <div class="section-container auto" data-section>
        <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>
于 2013-10-25T00:11:43.780 に答える