Javascript Zurb地基4段塌方试图用ZURB基金会4.3.2实现一个章节。我已经确定了包含JS和CSS文件的正确的两个，并在JS脚本中初始化基础，但是该部分继续将所有的内容和按钮折叠在一起。第一个部分/选项卡也不会显示_Javascript_Css_Zurb Foundation

Javascript Zurb地基4段塌方试图用ZURB基金会4.3.2实现一个章节。我已经确定了包含JS和CSS文件的正确的两个，并在JS脚本中初始化基础，但是该部分继续将所有的内容和按钮折叠在一起。第一个部分/选项卡也不会显示

javascript css zurb-foundation

Javascript Zurb地基4段塌方试图用ZURB基金会4.3.2实现一个章节。我已经确定了包含JS和CSS文件的正确的两个，并在JS脚本中初始化基础，但是该部分继续将所有的内容和按钮折叠在一起。第一个部分/选项卡也不会显示,javascript,css,zurb-foundation,Javascript,Css,Zurb Foundation,编辑：这里有一个JS小提琴：（我的第一个，所以如果我做了一些最糟糕的练习，请告诉我）在制作了JSFIDLE之后，我意识到它在较小的dpi屏幕上工作正常（在JSFIDLE提供的小区域内看起来不错，即使单击选项卡不起作用——我用实际代码检查了一下，并缩小了浏览器窗口，将部分切换到Accordion，效果很好）。因此，似乎只有在更大的屏幕上，当它恢复为选项卡时，才是当该部分折叠且不工作时有什么问题吗？谢谢各位

编辑：这里有一个JS小提琴：（我的第一个，所以如果我做了一些最糟糕的练习，请告诉我）

在制作了JSFIDLE之后，我意识到它在较小的dpi屏幕上工作正常（在JSFIDLE提供的小区域内看起来不错，即使单击选项卡不起作用——我用实际代码检查了一下，并缩小了浏览器窗口，将部分切换到Accordion，效果很好）。因此，似乎只有在更大的屏幕上，当它恢复为选项卡时，才是当该部分折叠且不工作时

有什么问题吗？谢谢各位

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


$（document.foundation（）；
123街道名称
城市，ST Zip


诸如注释、区域、使用类型、当前使用、Sqft、税收、价值、状态等

数据有什么改进吗

抵押数据

租赁数据

留置权数据
地图在这里
相关人员
相关属性

经过更多的测试，我找到了答案。我从他们的分区页面下载了源代码，并开始插入我的代码，试图让它正常工作。我之所以来到这里，首先是因为我的节在某一点上消失了，而另一个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>

据称，Puth.M.js包括所有其他类似的部分。我可以确认，如果你试图用Bask.M.js替换基础。JS和Buff.St.js，它将不起作用。如果保留SECT.js，并将其更改为基础。JS到Buffig.M.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>



诸如注释、区域、使用类型、当前使用、Sqft、税收、价值、状态等

数据有什么改进吗

抵押数据

租赁数据

留置权数据
地图在这里

任何愿意为您检查这一点的人首先需要创建一个工作的JSFIDLE代码。很可能，这不会发生。如果您自己创建一个，您会很快看到一些注释/答案。谢谢，我添加了一个JSFIDLE，如果您给结果框足够的空间（使其更大），它可以说明问题。使用JSFIDLE很难完全确定这一点，但您的javascript似乎没有正确加载。当您的实际站点（不是JSFIDLE）加载时，请检查控制台，我猜有些地方出了问题。在我的代码和他们的代码之间，我能看到的唯一真正的区别是元素级别的样式。也许JS应该添加CSS样式，但由于某种原因它无法运行？不过，控制台并没有用我的代码显示任何警告/错误。我花了整整几天的时间在这类东西上。请继续比较你的代码和他们的代码，记住其中一些类和数据属性应该由基金会的脚本添加和删除。当点击时，请确保你的部分正在扩展，因为它们不是在你的小提琴上做的，即使是在较小的布局中。你是在4.3.2的基础上吗？是的，打开基础。