Question

我试过Zurb Foundation Dropdown。我复制了Zurb Foundation文档中的所有内容，但我看到我的下拉列表与Foundation文档不同。我的下拉错了。

On Foundation doc： On Foundation doc http://image.free.in.th/v/2013/iy/140810073919.png

我的页面：

My page http://image.free.in.th/v/2013/ic/140810073900.png

这是我的测试代码：

<!doctype html>
<html class="no-js" lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Foundation | Welcome</title>
        <link rel="stylesheet" href="css/foundation.css" />
        <script src="js/vendor/modernizr.js"></script>
    </head>
    <body>
    <div class="row">
        <div class="large-12 columns">
            <!-- Dropdown -->
            <a href="#" data-dropdown="drop1">Has Dropdown</a>
            <ul id="drop1" class="f-dropdown" data-dropdown-content>
                <li><a href="#">This is a link</a></li>
                <li><a href="#">This is another</a></li>
                <li><a href="#">Yet another</a></li>
            </ul>

        </div>
    </div>
    <script src="js/vendor/jquery.js"></script>
    <script src="js/foundation.min.js"></script>
    <script>
        $(document).foundation();
    </script>
    </body>
</html>

Answer 1

您缺少对下拉列表js的引用

<script src="js/foundation/foundation.dropdown.js"></script>

http://foundation.zurb.com/sites/docs/v/5.5.3/components/dropdown.html

Zurb Foundation下拉错位

1 个答案: