0

无法理解有关如何初始化 Magellan 菜单的文档 ( http://foundation.zurb.com/sites/docs/magellan.html )

错误：

Uncaught TypeError: this.$element.data is not a function Magellan @ foundation.js:4192 (anonymous function) @ test2.php:174

代码：

<!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>test</title>
<link rel='stylesheet' href='css/foundation.css'/>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600' rel='stylesheet' type='text/css'>
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="js/foundation.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</head>
<body>
    <div class="row">
        <div class="large-8 columns">
            <div class="sections">
                <section id="first" data-magellan-target="first">
                    <div class="row">
                        <div class="large-12 columns">
                            <p>
                                lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem 
                                <br><br><br>
                                ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
                                <br><br><br><br><br><br><br><br><br>
                            </p>
                        </div>
                    </div>
                </section>
                <section id="second" data-magellan-target="second">
                    <div class="row">
                        <div class="large-12 columns">
                            <p>
                                lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem 
                                <br><br><br>
                                ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
                                <br><br><br><br><br><br><br><br><br>
                            </p>
                        </div>
                    </div>
                </section>
                <section id="third" data-magellan-target="third">
                    <div class="row">
                        <div class="large-12 columns">
                            <p>
                                lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem 
                                <br><br><br>
                                ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
                                <br><br><br><br><br><br><br><br><br>
                            </p>
                        </div>
                    </div>
                </section>
            </div>
        </div>
        <div class="large-4 columns">
            <ul id="nav" class="vertical menu" data-magellan>
                <li><a href="#first">First Arrival</a></li>
                <li><a href="#second">Second Arrival</a></li>
                <li><a href="#third">Third Arrival</a></li>
            </ul>
        </div>
    </div>
</body>
<script>
$(document).foundation();
    var target = document.getElementById('nav');
    var elem = new Foundation.Magellan(target);
</script>
</html>
4

0 回答 0