Zurb基金会4部分崩溃

试图用Zurb基金会实施部分4.3.2。我已经确保包含js和css文件的右边，并在js脚本中初始化基础，但该部分继续将所有内容和按钮合并到一起。第一部分/标签也没有出现。Zurb基金会4部分崩溃

编辑：这里有一个JS小提琴：http://jsfiddle.net/ethanova/R2SdH/（我第一次，所以如果我进行某种最坏的做法，让我知道）

制作的jsfiddle后，我意识到，这对小dpi的正常工作屏幕（在JSFiddle提供的小区域看起来没问题，即使点击标签不起作用 - 我使用我的实际代码进行了检查，并使浏览器窗口更小，将部分切换到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>

来源

2013-10-23 Ethan

任何人都愿意看看这个你首先需要创建您的代码工作的jsfiddle。机会是，这不会发生。如果你自己创建一个，你会很快看到一些评论/回答。 –

谢谢，我添加了一个JSFiddle来说明如果给结果框足够的空间（使其变大），问题。 – Ethan

很难用jsfiddle完全确定这一点，但它看起来像你的JavaScript没有正确加载。检查控制台，当你的实际网站（而不是jsfiddle）加载时，我猜一些事情是乱序的。 –

经过一些更多的测试后，我想通了。我从他们的Section页面下载了源代码，并开始插入我的代码，试图使其工作。我第一次来到这里的原因是因为我的部分消失了一个点，另一个stackoverflow答案说只需将“数据部分调整大小”添加到部分容器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-25 00:11:43 Ethan

奇怪... foundation.min.js应该工作。你在基金会4.3.2上吗？ –

是的，打开了foundation.min.js只是为了确认，它显示了4.3.2 – Ethan

Zurb基金会4部分崩溃

回答

相关问题