【发布时间】：2013-10-23 16:23:43
【问题描述】：
尝试使用 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>
【问题讨论】：
-
任何愿意为您检查这一点的人首先需要为您的代码创建一个有效的 jsfiddle。很有可能，这不会发生。如果您自己创建一个，您会很快看到一些 cmets/answers。
-
谢谢，我添加了一个 JSFiddle，如果你给结果框足够的空间（让它更大）来说明问题。
-
很难使用 jsfiddle 完全确定地确认这一点，但看起来您的 javascript 没有正确加载。当您的实际站点（不是 jsfiddle）加载时检查控制台，我猜有些东西出了问题。
-
我从他们的示例页面中获取了 HTML 并将其插入到我的页面中，并且它有效。我可以看到我的代码和他们的代码之间唯一真正的区别是元素级别的样式。也许 JS 应该添加 CSS 样式，但由于某种原因它没有运行？不过，控制台不会仅使用我的代码显示任何警告/错误。
-
我已经为这样的事情浪费了一整天的时间，哈哈。继续将您的代码与他们的代码进行比较，记住其中一些类和数据属性应该由 Foundation 的脚本添加和删除。确保您的部分在单击时展开，因为它们没有在您的小提琴上这样做，即使在较小的布局中也是如此。
标签： javascript css zurb-foundation