文章/答案/技术大牛

发布

社区首页 >问答首页 >Zurb基础4段坍塌

问Zurb基础4段坍塌
EN

Stack Overflow用户

提问于 2013-10-23 16:23:43

回答 1查看 1.6K关注 0票数 0

尝试用ZURBFoundation4.3.2实现一个节。我确保包含了正确的js和css文件，并在js脚本中初始化了基础，但是这个部分继续折叠所有的内容和按钮。第一个部分/选项卡也没有出现。

编辑：这里有一个JS：http://jsfiddle.net/ethanova/R2SdH/ (我的第一个，所以如果我做了最糟糕的练习，请告诉我)

在制作了JSFiddle之后，我意识到它在较小的dpi屏幕上正常工作(在JSFiddle提供的小区域内，它看起来很好，即使单击选项卡不起作用--我用实际的代码检查了一下，并使浏览器窗口更小，将部分切换到手风琴，它工作得很好)。因此，它似乎只在较大的屏幕上，当它恢复到Tabs时，是当部分崩溃而不能工作的时候。

对出什么问题有什么想法吗？谢谢你们。

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

zurb-foundation

javascript

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2013-10-25 00:11:43

经过更多的测试，我想出了办法。我从他们的节页面下载了源代码，并开始插入我的代码试图让它工作。我之所以来到这里，首先是因为我的部分在某一点消失了，而另一个堆栈溢出回答说，只需在部分容器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.js和foundation.section.js替换foundation.min.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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/19547134

复制

相似问题

问Zurb基础4段坍塌
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Zurb基础4段坍塌EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Zurb基础4段坍塌
EN