祖尔布基金会 4 部分崩溃

Zurb Foundation 4 Section collapsing

本文关键字：崩溃 基金会      更新时间：2023-09-26

尝试使用 Zurb Foundation 4.3.2 实现一个部分。我已经确保包含正确的js和css文件，并在js脚本中初始化foundation，但是该部分继续将所有内容和按钮折叠在一起。第一个部分/选项卡也没有显示。

编辑：这是一个JS小提琴：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>

经过更多的测试，我想通了。我从他们的部分页面下载了源代码，并开始插入我的代码，试图让它工作。我首先来到这里的原因是因为我的部分在某一点消失了，另一个堆栈溢出答案说只需将"数据部分调整大小"添加到部分容器div。 好吧，不要。这让它恢复了隐形状态。我已经从我的标题中删除了一些js以试图更接近他们的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它将不起作用。如果您保留部分.js并更改为 foundation.js更改为 foundation.min.js它将不起作用。你必须有基础.js和基础部分.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>
相关文章：