0

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

编辑：这是一个 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

经过一些更多的测试，我想通了。我从他们的部分页面下载了源代码并开始插入我的代码以使其工作。我首先来到这里的原因是因为我的部分在某个时候消失了，另一个stackoverflow答案说只是将“data-section-resized”添加到部分容器div中。好吧，不要。这让它回到了隐形状态。我从我的标题中删除了一些 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.min.js 替换foundation.js 和foundation.section.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 回答